I have the following media query in a <style> block, within the <head> of my index.htm file....
@media screen and (min-width: 40.5em) {
header[role="banner"] {border:solid 1px red;}
}
But IE10 will not produce a red border around my header when the page loads. Now if I take the style out of that media query, then IE will process the red border when the page reloads.
What is the secret here in getting this displayed in IE10, with my page loads?
Also...I have the following set in my
<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
...
</head>
px does not work for me either...
@media only screen and (max-device-width: 100px) {
header[role="banner"] {border:solid 1px red;}
}
no show...
UPDATE
I figured out whats going on. Within my style block I have the following css code...
@media screen and (min-width: 5em) {
//various css rules for mobile view
}
and right below it I have....
@media screen and (max-width: 40.5em) {
//various css rules for desktop view
}
Chrome understands this on my desktop browser and reads the second media query. But IE10 gets stuck on the first one. My goal is to have a mobile first approach, but not for IE to get stuck there if the screen size is larger. That is my issue...
When I remove the 1st media query, the 2nd one works in IE. How can i keep both of them and have IE know to ignore the first for larger screens...?
Set up your mobile styles first without calls to any @media queries (those will be your defaults). From there, you can use @media queries to adjust for larger/different screen resolutions.