By default I want to give my body element a green border. On a device that supports retina display I want to check for size first. On an ipad I want to give my body a red border and on an iphone I want to give it a blue border. But nesting media queries like so doesn't work:
body { border: 1px solid green; }
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#media (max-width: 768px) and (min-width: 320px) {
body { border: 1px solid red; }
}
#media (max-width: 320px) {
body { border: 1px solid blue; }
}
}
No. You need to use the and operator and write that as two queries. You can, however, do this in SCSS, which will compile to CSS, but it will combine them by unfolding them and using the and operator.
This is a common problem, and once I first wrote LESS or SCSS, I didn't ever want to go back to writing this long-hand.
Long-handed CSS:
#media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
(min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
body {
border: 1px solid red;
}
}
#media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
(min-resolution: 192dpi) and (max-width: 320px) {
body {
border: 1px solid blue;
}
}
Nesting queries may work, but support varies across browsers.
In 2020, yes!
Actually the accepted answer has been outdated for a long time now. I'm not even sure if it was technically correct even at the time of posting. Firefox has supported nesting since 2012 and Chrome since 2013 (source).
You should expect support from all major browsers now, of course with the usual exception of IE.
You can test it using the following HTML and CSS. Just open up dev panel in your browser and vary your viewport width.
#abc {
background: green;
}
/* width < 801px */
#media (max-width: 800px) {
#abc#abc {
background: red;
}
/* 500px < width < 801px */
#media (min-width: 500px) {
#abc#abc#abc {
background: yellow;
}
}
}
<div id="abc">Example text</div>
Alternatively, check out this codepen.
Related
I have 3 open intervals of screen width now. They are (0,600], (600,800) and [800,1000] and each has a diffferent css style. For example:
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
But how should I express (600,800) with ccs media query ?
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 600px) and (max-width: 800px){
background: #fff
}
You can use 3rd media query.
Start with a default value, which is the value of the mobile first. Then modify the values from a minimum with and up:
HTML:
CSS:
.bg {
width: 100vw;
height: 100vh;
background-color: #000;
}
#media screen and (min-width: 600px){
.bg {
background-color: steelblue
}
}
#media screen and (min-width: 800px){
.bg {
background-color: tomato
}
}
#media screen and (min-width: 1000px){
.bg {
background-color: #2c3e50;
}
}
#media (max-width: 1000px) {
background: #eee;
}
#media (max-width: 800px) {
background: #fff;
}
#media (max-width: 600px) {
background: #000;
}
This order will execute based on screen size and CSS will be applied accordingly.
You can define these interval for media queries link below:
#media screen and (min-width: 801px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 601px) and (max-width:800px){
background: #cccccc
}
#media screen and (max-width: 600px) {
background: #000
}
Now
The first media query will work from 0px to 600px
The second one will work 601px from to 800px
And the Third one will work from 801px to 1000px
Now I'm learning about CSS
when I type like this
.pc{
color: red;
font-size: 50px;
background-color: pink;
}
#media (min-width: 600px) and (max-width: 767px) {
.pc {
color: blue;
font-size: 20px;
background-color: yellow;
}
}
#media (min-width: 100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: gray;
}
}
for example
in the 599.XXXpx (599.123, 599.284)
At this point
the color is go back to red and pink
How can I solve this?
Most of browsers will not display fraction pixel. A pixel is a smallest unit to display. So you do need to be worry about the breakpoint you mentioned. It is not phisically happens.
In essence, I would recommend you to use the same number for both media queries, and then order the rules so the one that you want to win goes later.
If you would like to keep it blue and yellow, then you will have to change the order of the rules:
#media (min-width: 100px) and (max-width: 600px) { /* … */ }
#media (min-width: 600px) and (max-width: 767px) { /* … */ }
But if you'd like to keep the green and gray colors, keep the current order:
#media (min-width: 600px) and (max-width: 767px) { /* … */ }
#media (min-width: 100px) and (max-width: 600px) { /* … */ }
Zurb Foundation crashes with Bootstraps on screen sizes, eg:
#media only screen and (min-width : 320px) {
.button-home {
margin-bottom: 20px;
border: 1px solid red;
}
}
This code won't work when Zurb Foundation is included.
How can avoid/ fix this?
Or better how do I convert that code to Foundation?
I need Bootstrap and Foundation to be present on my site at the moment.
Notes:
The red colour should present only on smaller screens. now it is present on all screen sizes.
I have Foundation loaded after Bootstrap.
I am on "bootstrap": "^3.3.7", "foundation-sites": "^6.3.0-rc1"
This is my error:
/* Small Devices, Tablets */
#media only screen and (min-width : 320px),
#media only screen and (min-width : 480px),
#media only screen and (min-width : 768px) {
.button-home {
margin-bottom: 20px;
border: 1px solid red;
}
}
Now works with:
#media only screen and (max-width : 768px) {
.button-home {
margin-bottom: 20px;
border: 1px solid red;
}
}
#media only screen and (min-width: 767px) and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (min-width: 481px) and (max-width: 766px) {
html { background-color: green; }
}
#media only screen and (min-width: 321px) and (max-width: 480px) {
html { background-color: green; }
}
#media only screen and (max-width: 320px) {
html { background-color: green; }
}
html {
background-color: blue;
}
I'm using opera, 1920x1080 screen. The first #media tag works, the background changes to green when opera is at 100% zoom.
Changing zoom to 90% makes the background blue already...and it stays blue the whole time even at 10% zoom. Why is that so?
The first #media tag seems to be working, the others don't. And even so the first tag doesn't work properly (90% * 1080px > 767px; so the color should be green while at 90% zoom but it's not).
Move your single html definition to the top, you can also reduce the media queries to just use max
html {
background-color: blue;
}
#media only screen and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (max-width: 766px) {
html { background-color: red; }
}
#media only screen and (max-width: 480px) {
html { background-color: black; }
}
#media only screen and (max-width: 320px) {
html { background-color: white; }
}
http://jsfiddle.net/Y5tLf/
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
Here's an example:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two">Contact us</div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
/* Media Queries - Re-arranged version */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
#media (max-width: 400px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
#media (max-width: 400px) {
body {
background: blue !important;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
or
#media (max-width: 400px) {
html > body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
#media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.