css3 - CSS Media Query min-width not working correctly -


i have html like:

<!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 name="viewport" content="width=device-width, initial-scale=1.0" />     <title>code: newyork</title>     <link rel="stylesheet" href="test.css" /> </head> <body data-ng-app="us">     <input type="text" /> </body> </html>

and css is:

input {   background-color: red; } /* ---- desktop */ @media screen , (min-width: 1000px) , (max-width: 1200px) {     input {         background-color: green;     }  }

now css applies when window @ 909px width. not scrollbar problem. getting nuts simple problem. tested chrome , ie10 both same.

can please doing wrong here?

i used html:

<!doctype html>  <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>code: newyork</title> </head> <body data-ng-app="us">     <input type="text" /> </body> </html>

with simpler media query declaration one:

@media (min-width: 1000px) , (max-width: 1200px) {   input {         background-color: green;     }   }

it's working great here: http://jsbin.com/ubehoy/1

debugging firefox responsive design view , dragging resizer, changes input background color correctly when width limits reached.

tried chrome 26.0.1410.64 m/ie 10 , it's working great too.


Comments

Post a Comment