When creating sites, and in particular, those that are responsive, it is easy to make mistakes; after all, it's like learning any new technology; we're not perfect from the outset!
To help with your first few steps into the world of responsive construction and creating media queries, let's spend a little time exploring some of the more common mistakes, understand why they cause issues, and go through a few pointers to help avoid these problems:
<meta name="viewport" content="width=device-width, initial-scale=1″>
If the tag is not included, then text will appear smaller, as mobile devices zoom pages by default.
767px
:@media screen and (max-width: 767px) { h1 { font-size: 30px; } } @media screen and (min-width: 767px) { h1 { font-size: 40px } }
Trouble is, we still have an issue here. If we set both of these queries in our style sheet, then they will both kick in if our screen estate is 767px
or greater. At best, we might end up with h1
being 40px
(instead of 30px
); at worst, we will get some odd effects! It pays to take care over what media queries you set. Make sure that your queries do not overlap.
h3 {color: darkred;} h3 {color: #f00;}
What color will we have? Well, if you said dark red, then get ready for a surprise; the answer is actually #f00
or green. Why would this cause us an issue? If we had written a couple of media queries, but didn't take care over the breakpoints or didn't plan the order of our queries properly, then we might end up adding one too many assignments. Remember, if two selectors apply to the same element, the one with higher specificity wins.
It's all too easy to overthink an issue when working with media queries. In many cases, it simply requires a little forethought and care, and we can produce some useful rules to manage our content on mobile devices without too much overlap.
Let's change tack and move on. Assuming any code we write is syntactically correct, now is a good opportunity to explore some guidelines we can follow when writing media queries. Although the next section is entitled Exploring best practices, I personally hate the phrase. It is one which is used and abused to death! Instead, consider them as some friendly tips to help improve your nascent skills when writing queries. It's all about exploring the art of possible, while balancing it with catering for more practical needs, such as our target market and supported devices.