Menu
I have a 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 my CSS is:
input {
background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
now the CSS applies when the window is at 909px width. Obviously not a scrollbar problem. I am getting nuts with this simple problem. I tested it with Chrome and IE10 both the same.
Can anybody please help what I am doing wrong here?
878
CSS declared inline This may be the reason why your media queries aren't working. That is to say, you may have declared CSS within your HTML document. So if this is the case, simply go through the HTML document and remove the CSS declared inline. Alternatively, you can override the inline CSS with !
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
In addition to making media queries less verbose, the new syntax has the advantage of accuracy. The min- and max- queries are inclusive of the specified values, for example min-width: 400px tests for a width of 400px or greater.
The min-width and max-width are media features that correspond to a certain media type that has been specified in the media query. The min-width specifies the minimum screen width of a specific device, meanwhile, The max-width media feature states the maximum screen width of a specific device.
I used this 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 a simpler media query declaration like this one:
@media (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
It's working great here: http://jsbin.com/ubehoy/1
Debugging with Firefox Responsive Design View and dragging the resizer, it changes the input background color correctly when the width limits are reached.
Tried with Chrome 26.0.1410.64 m/IE 10 and it's working great too.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
