Media Queries?
Media Queries?
Out of context: Reply #17
- Started
- Last post
- 25 Responses
- nb0
@media (min-width:100px) and (max-width:350px) {
.class {color:red;}
}
^This means that the width must be BETWEEN 100px and 350px for the color to be red. In other words, both conditions must be met in order for the css to be applied. That's why the "and" is in there.Or, you can use a comma to separate two conditions, it works like an "or" statement:
@media (min-width:600px), (max-width:200px) {
.class {color:green}
}
^This is less common, probably because it's confusing. In this case, the color is green if EITHER condition is met. In my example, the color is green if the width is less than 200px or greater than 600px.- I think your top example is what I'm looking for. Thanks nb.mg33
- Also, what Eskema said is accurate. You don't need to duplicate everything. The most clear method is to start with mobile and use just min-widths as you grow.nb
- Or, start with the widest and use max-widths only, as you shrink. But I think starting small and min-widthing up is so much clearer and easier to do.nb