https://wiki.divifree.com/index.php?action=history&feed=atom&title=DF-CSS_Breakpoints 2026-06-10T03:57:30Z Revision history for this page on the wiki MediaWiki 1.39.1 https://wiki.divifree.com/index.php?title=DF-CSS_Breakpoints&diff=79&oldid=prev 2023-02-27T12:38:25Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 12:38, 27 February 2023</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td> <td colspan="2" class="diff-lineno">Line 1:</td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[DF-CSS]] >> DF-CSS Breakpoints</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Available breakpoints ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Available breakpoints ==</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* xs : &lt; 576px (Extra Small) - Téléphone vertical - Default</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* xs : &lt; 576px (Extra Small) - Téléphone vertical - Default</div></td></tr> </table>

Loribel https://wiki.divifree.com/index.php?title=DF-CSS_Breakpoints&diff=78&oldid=prev 2023-02-27T12:36:47Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 12:36, 27 February 2023</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l2">Line 2:</td> <td colspan="2" class="diff-lineno">Line 2:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* xs : &lt; 576px (Extra Small) - Téléphone vertical - Default</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* xs : &lt; 576px (Extra Small) - Téléphone vertical - Default</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* sm : &gt;= 576px (Small) - Téléphone</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* sm : &gt;= 576px (Small) - Téléphone</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* md : &gt;= <del style="font-weight: bold; text-decoration: none;">767px </del>(Medium) - Tablette verticale - Téléphone horizontal</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* md : &gt;= <ins style="font-weight: bold; text-decoration: none;">768px </ins>(Medium) - Tablette verticale - Téléphone horizontal</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* lg : &gt;= 981 (Large) - Tablette et Desktop / Petits écrans</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* lg : &gt;= 981 (Large) - Tablette et Desktop / Petits écrans</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* xl : &gt;= 1280px (Extra Large) - Desktop / Écran moyen</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* xl : &gt;= 1280px (Extra Large) - Desktop / Écran moyen</div></td></tr> </table>

Loribel https://wiki.divifree.com/index.php?title=DF-CSS_Breakpoints&diff=77&oldid=prev 2023-02-27T12:36:06Z

<p>Created page with &quot;==Available breakpoints == * xs : &lt; 576px (Extra Small) - Téléphone vertical - Default * sm : &gt;= 576px (Small) - Téléphone * md : &gt;= 767px (Medium) - Tablette verticale - Téléphone horizontal * lg : &gt;= 981 (Large) - Tablette et Desktop / Petits écrans * xl : &gt;= 1280px (Extra Large) - Desktop / Écran moyen * xxl : &gt;= 1536px (Extra Extra Large) - Desktop / Écran large ==CSS Media Query (Mobile First)== &lt;pre&gt; // X-Small devices (portrait phones, less than 576px) /...&quot;</p> <p><b>New page</b></p><div>==Available breakpoints ==<br /> * xs : &lt; 576px (Extra Small) - Téléphone vertical - Default<br /> * sm : &gt;= 576px (Small) - Téléphone<br /> * md : &gt;= 767px (Medium) - Tablette verticale - Téléphone horizontal<br /> * lg : &gt;= 981 (Large) - Tablette et Desktop / Petits écrans<br /> * xl : &gt;= 1280px (Extra Large) - Desktop / Écran moyen<br /> * xxl : &gt;= 1536px (Extra Extra Large) - Desktop / Écran large<br /> <br /> ==CSS Media Query (Mobile First)==<br /> &lt;pre&gt;<br /> // X-Small devices (portrait phones, less than 576px)<br /> // No media query for 'xs' since this is the default<br /> <br /> // SM - Small devices (landscape phones, 576px and up)<br /> @media (min-width: 576px) { ... }<br /> <br /> // MD - Medium devices (tablets, 768px and up)<br /> @media (min-width: 768px) { ... }<br /> <br /> // LG Large devices (desktops, 981px and up)<br /> @media (min-width: 981px) { ... }<br /> <br /> // XL - X-Large devices (large desktops, 1280px and up)<br /> @media (min-width: 1280px) { ... }<br /> <br /> // XXL - XX-Large devices (larger desktops, 1538px and up)<br /> @media (min-width: 1538px) { ... }<br /> &lt;/pre&gt;</div>

Loribel