How to Use > or < (Greater Than and Less Than ) Symbols in Media Queries

How to use or (Greater than and Less than ) Symbols in Media Queries

Media queries don't make use of those symbols. Instead, they use the min- and max- prefixes. This is covered in the spec:

• Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.

So, instead of something like (width <= 768px), you would say (max-width: 768px) instead:

@media screen and (max-width: 768px) {}

media-query specificity - why is the largest style used when using max-width media queries?

Because 480 is less than the last max-width of 1024. CSS always uses the last valid value, so you need to order max-width media queries from largest to smallest to get the intended value.

jsbin

.container {
    background: none;
}

@media screen and (max-width: 1024px) {
    .container {
        background: blue;
    }
}

@media screen and (max-width: 768px) {
    .container {
        background: white;
    }
}

@media screen and (max-width: 480px) {
    .container {
        background: red;
    }
}

Media queries in less with variables-need global variables

You can sort of achieve this by using list arrays for each property and screen-width (like the below sample):

@BWInputHeight: '20px','40px','60px'; // Height of the button for min-width=320 and min-width=768 respectively
@minwidths: '320px','768px','1024px'; // The widths for which you need the media queries to be created

.loop-column(@index) when (@index > 0) { // Loop to iterate through each value in @minwidths and form the corresponding output
    .loop-column(@index - 1);
    @width:  extract(@minwidths, @index); // extracts width based on array index
    @media (min-width: e(@width)){
          .dataTables_filter input{
            height: e(extract(@BWInputHeight,@index)); // extracts button height for the corresponding screen width
            max-width: 135px;
            display: inline-block;
            padding: 1px 6px;
            margin-right: 15px;          
          }
    }
}

.loop-column(length(@minwidths)); // calling the function

Demo in Code-pen - Modify output area width to see difference and click the eye icon in CSS tab to see compiled CSS.

Note: As per this Stack Overflow thread, both dotless and less.js should be 99% compatible and hence I have given this answer. In case this doesn't work for you, I will happily have this answer removed.

Why do some max-width media queries use a .98px

I've answered a related question here

Bootstrap 4 subtracts .02px from the top end of each breakpoint to ensure there are no overlapping breakpoints.

This is because CSS media queries only allow for "equal to" logic and not "less than" as explained here

Using .02px less, instead of 1px less, provides better granularity between breakpoints.

CSS media queries ( media screen )

1) screen here means the screen of the device itself (not a print as print is the common one). But this has same effect as

@media (min-width: 312px)

Just you are specifying that you want the max-width of the screen on that the website loaded, that's it

2) the max means the maximum width of the device screen to which the following styles are applied.

for eg:

@media screen and (max-width: 768px){
  //These styles will apply only if the screen size is less than or equal to 768px
}

3) There is no termination. If you have max and min with 600px, then the styles will applied as per the position of the code. The code that comes below will apply (if min code is at line number 10 and max code at line number 20 then max will work)

Why does the order of media queries matter in CSS?

That's by design of CSS — Cascading Style Sheet.

It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

So, given this CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

if the browser window is 350 pixels wide, the background will be blue, while with this CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.

Finally, with

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

or

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

the background will be blue (with a 350 pixels wide window).

How can I apply a Media Query to both Height and Width?

@media (min-height: 768px) and (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }

Here is the possible duplicate question:

Media Queries: check min-height and min-width?

Here are a few references from the question :

First reference

Second reference

Bootstrap 4 - Media Queries Approach

I will code the large screen first than one-by one.. to the small device

That is exactly the best way, to do this. From the bigger to the smaller.

Why?
Because all lesser than 34.00 em devices are also lesser than 75.00 em, so always the last one would override everything. Now when you reverse this order, it will work just fine for you. Every device will be stopped at one of these queries and won't go further.

/* MORE THAN 75 */
body { background-color: skyBlue; }

/* LESS THAN 75 */
@media (max-width: 74.9em) { body {background-color: pink;} }

/* LESS THAN 62 */
@media (max-width: 61.9em) { body {background-color: blue;} }

/* LESS THAN 48 */
@media (max-width: 47.9em) { body {background-color: green;} }

/* LESS THAN 34 */
@media (max-width: 33.9em) { body {background-color: red;} }

Issue with media queries - Prevent override of CSS rules

In order to prevent the override of CSS, use the below code to specify rules only for width between 640px and 840px:

@media screen and (min-width: 640px) and (max-width:840px) { 
  /* CSS rules for width between 640px and 840px */
}

---

Alternatively you can reorder the code:

@media screen and (max-width:840px) {} 

@media screen and (max-width:640px) {} /* This will override the above CSS rules */

Check out this page: MDN Media Queries to learn some good practices.

Way of writing media queries

Take 500px as an example, in the first way, only the second property (border) will apply:

/* 500 is not between 767 and 990, so this rule will ignore */
@media screen and (min-width:767px) and (max-width:990px){
    .elem {
        background: red;
    }
}

/* 500 is between 480 and 766, this rull will apply */
@media screen and (min-width:480px) and (max-width:766px){
    .elem {
        border: 10px solid green;
    }
}

jsFiddle Demo.

But in the second way, both of these rules will apply:

/* 500 is smaller than 991, this rull will apply */
@media screen and (max-width:991px){
    .elem {
        background: red;
    }

}

/* 500 is smaller than 767, this rull will apply */
@media screen and (max-width:767px){
    .elem {
        border: 10px solid green;
    }
}

jsFiddle Demo.

---

Related Topics