Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><em>I'm not sure if this post is a comment or an answer, but I completely agree that <code>max-width</code> is too often ignored or even looked down upon and would like to present my two cents on the topic.</em></p> <p>For most media queries, <code>min-width</code> is without a doubt the best approach. A common scenario is <code>float</code>, where you rarely want floated elements on a slim screen but still want them to float on larger screens, so you simply add the <code>float</code> through a <code>min-width</code> media query.</p> <h2>Generalized, the reasoning is that <em>it's better to add something once it's needed rather than removing it when it's not.</em></h2> <p>Since you almost always add more CSS to larger screens rather than vice-versa, it makes sense people limit themselves to <code>min-width</code> media queries. </p> <p>But what about the scenarios when you actually <em>do</em> add CSS that's exclusive to the smaller screen?</p> <p>Perhaps you want to replace text with an icon and have to do it through pseudo elements, perhaps you're doing layout changes with CSS for small screens. Perhaps you need to change some colors or add a <code>margin</code>/<code>padding</code> to the smaller screen. </p> <p>It doesn't really matter, the point is that sometimes you want to add something to a smaller screen that's not supposed to be there on the larger screen. So, following the previously stated reasoning, in those scenarios it makes sense to use <code>max-width</code> instead of <code>min-width</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload