@Media Min-Width & Max-Width

@Media min-width & max-width

I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read @media. When I use @media, I use it like this:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

But you can do whatever you like with your @media. This is just an example of what I've found best for me when building styles for all browsers.

iPad CSS specifications.

Also! If you're looking for printability you can use @media print{}.

How to use min-width and max-width in CSS media queries with high density mobile device screens

There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.

To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.

For example, to set your site to display at a minimum width of 500px on mobile, use:

<meta name="viewport" content="width=500, initial-scale=1">

To display the site at the browser's width use:

<meta name="viewport" content="width=device-width">

In addition to the MDN article, the following article may be helpful for setting display widths for tablets.

Min width vs Max Width

max-width in a media query means the following:

All styles applied in that media query will run as long as 'screen' is below the max width, for example, max-width: 1200px, all CSS will be applied under 1200px.

Min-width is the opposite, all CSS wil run as long as 'screen' is above the min-width, for example, min-width: 1200px, all CSS will be applied above 1200px.

Media Queries min-width VS max-width for responsive website

In its current form, your question is primarily opinion based.

It would have probably been better to ask if anyone knows what the reasons behind Bootstrap's approach might have been, although that question is, too, primarily opinion based. But your true chances of getting it answered are much higher here than trying to contact Bootstrap's authors.

And that's why I'll give you my own reasoning, coming from a hands-on approach: I need to get stuff done, it has to be fast and it has to be production ready.

As far as the order of @media queries goes, the only argument for using mobile-first over desktop-first is it sounds better for people who have no clue what it means. So you can always reply to your clients/boss, when they ask:

— Is it "mobile-first"?

— Of course, we use the latest technology...

But, in the real world, as long as your @media queries apply correct code to each responsiveness interval, you're doing-it-right.

The only things you should worry about are, in this order, where possible:

• writing valid code
• writing cross-device/cross-browser code
• writing maintainable and easily readable code (for you and other devs)
• writing less code for same functionality.

With regard to using em vs px, this is the second attempt by Bootstrap to dump px for em in @media queries. To my knowledge, the first attempt was dumped due to lack of support and differences in em calculation on a significant share of mobile browsers, at the time. However, a citation is needed here and I'm unable to find anything about that discussion which I remember reading ~2 years ago. I'm not even sure if it was around v3 or the v4 prototype, which was being released at the time. I think it was v4, though.

Anyway, if they decided to use em in v4, em is probably safe to use now.

Edit: Looking closer into v4 beta — released just 9 days ago, it looks like what you quoted is from the scss file, later parsed into px queries into the final dist code. So I am assuming the discussion I remember reading is still valid today. In conclusion, I would advise against using em in your CSS @media queries.

Last, but not least, the screen part should only be considered when you need to take care of how your page looks printed vs how it looks on screen.

If you do need to take care of this, depending on the differences between the two, you have to assess the amount of code you would override if all your existing (screen) code applied to print vs writing all print code from scratch.

If first is faster, don't add screen to your queries and place the @media print overrides last.

If the latter is faster, wrap existing code inside @media screen, add screen to your existing queries, as Bootstrap does, and place your print code inside another @media print, so it doesn't affect screen.

Note: I prefer the first method, as it is a hands-on approach, easily testable and it usually results in less code being written.

How to set @media (min-width) and (max-width) for both chrome and firefox

Working all browser

.mm {    background: cyan;    width: 200px;    line-height: 200px;    font-weight: 700;    text-align: center;    font-size: 50px;}

@media only screen and (min-width:768px) and (max-width:990px){ .mm{  background:red;  } }

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head>
<body><div class="mm">12</div></body></html>

@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
    display: none !important;
}
}

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

@media screen and (max-width: 320px){
  .calculator {
    max-width: 60%;
  }
}

@media screen and(max-width: 320px) {
  .calculator {
    max-width: 60%;
  }
}