Internet Explorer 10+ Media Queries and Responsive Break Points

Internet Explorer 10+ media queries and responsive break points

It works if you do it like this: repeat all the parts of the media query selector.

.For.IE.only {  display: none}
@media all and (-ms-high-contrast: active) and (max-width: 950px),       all and (-ms-high-contrast: none) and (max-width: 950px) {  .For.IE.only {    display: block  }}

<div class="For IE only">  This is for IE only, and only on narrow screens</div><div>  This is for all browsers</div>

How to detect an IE media query with a max-width property?

Try this:

 @media all and (-ms-high-contrast: none) and (max-width: 550px),         all and (-ms-high-contrast: active) and (max-width: 550px) {    .melement {      border:solid 1em red;    }  }

Media queries for breakpoints are effective only if touch simulation is on

I think I can help you.

You're using deprecated media queries. You don't need to use -device-, just min-width or max-width. I also noticed that your site is without the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This is very important too!

Finally, review all meta tags because some sizes are conflicting.

List of media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

About Viewport:
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

Merging media queries, using SASS and Breakpoint (Respond-To)

Generally, multiple media queries is not a big deal thanks to GZIP being used to compress CSS when passed from server to client.

To enable media queries support in IE7 and 8, i've been succesfully using Respond.js.

See this small guide how to combine Respond.js with Selectivizr: https://stackoverflow.com/a/16732064/901944

Media Queries for Different zoom Levels of Browser

After a lot searching. I found my answer.

We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.

For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini.
therefore you can target both Ipad mini and browser zooming(@175%) by using a common media query

i.e @media screen and (min-width:732px)
So if you target different devices using media queries (make site responsive for different Devices) then your browser zooming is itself taken into account.

What would cause a responsive site to default to mobile?

IE8 doesn't support media queries, so probably it's processing all the CSS rules, even those a full-width screen shouldn't.

To prevent this problem, add the only keyword after each @media rule ( @media only screen ... ).

Then you can reach support including the fantastic plugin respond.js in the <head> section of all your pages

Media queries in Sass

$small: 300px;
$medium: 900px;

.smth {
  //some CSS
  @media screen and (max-width: $small) {
    //do Smth
  }
  @media screen and (min-width: $medium) {
    //do Smth
  }
}

Something like this?

Internet Explorer 10+ Media Queries and Responsive Break Points