Css media

Top 10 Important CSS Media Queries

Media queries are CSS modules that give specific instructions regarding the layout of web pages.

In this article, we take a look at 10 of them.

1. When setting up media queries, it is essential to design for mobile first.

By doing this, the page (s) will display faster on smaller devices.

Here is a sample code.

2. When setting up your layouts, consider the different screens and devices

Each has their own style of heights and widths, so it’s difficult to set breakpoints for each device. One way to solve this problem is to set rough breakpoints and only cover a limited number of devices.

Here is an example of code you would use:

3. Another way to deal with breakpoints

There are no hard and fast rules when it comes to breakpoints. Opinions are plentiful and you need to decide what works for you and / or your clients. One way to fix the problem is to start with a mobile layout and then expand the layout until it is obvious that the design is no longer working. This would be a good time to insert a breakpoint.

4. Remember to create effects according to the orientation of the device.

For example, if the device is rotated in landscape mode, it will trigger an effect.

@media only screen and (orientation: landscape) {
    body {
        background-color: saddlebrown;
    }

5. Fonts are extremely important, especially on mobile devices.

You want to choose a font that is easy to read at different resolutions. It is also essential to avoid fancy fonts. The other problem is the contrast. Not enough and your text will be difficult to read. Here is an example of how you would set up a media query for fonts.

/* If screen size is 501px plus, set the font-size of 
to 90px */ @media only screen and (min-width: 501px) { div.example { font-size: 90px; } } /* If screen size is 500px or less, set the font-size of
to 35px */ @media only screen and (max-width: 500px) { div.example { font-size: 35px; }

6. Image sizing

There are a lot of opinions on this topic. Some designers prefer to use an image and resize it using CSS. This is a dangerous practice because if you design an image for mobile and resize it to work on a desktop, it will eventually pixelate or crumble. A best practice is to use different image sizes, such as small, medium, and large, depending on the device. A small image would be perfect for mobile and, properly optimized, would load much faster than an all-purpose image. The other thing to realize is that if an image is scaled over 20%, it will start to get pixelated, so you need to take this into account when creating your layouts.

7. Hide items when screen size changes

Hide items is a good practice if they don’t look good when collapsed, like on a mobile device. Here is a code you can use:

@media screen and (max-width: 400px) {
  div.example {
    display: none;
  }
}

8. Navigation menus are important

Below is a code that will display a navigation menu horizontally on large screens and vertically on small screens.

@media screen (max-width: 601px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

9. Test your code

Make sure that the code you are using does not cause conflicts. This could cause problems down the line. And if you can’t test all of the permutations in your code, consult beta testers who can help you out, and make sure what you’ve done isn’t serious. Few things are more embarrassing than having to deal with a major problem after the fact.

10. Don’t overdo it

While media queries are important, you want your layout to be as simple as possible. If you keep it simple, there will be less ongoing maintenance to keep your site fresh and clean.

About the Author

Nathan Segal has been working as a freelance writer for 18 years. During this period, he published over 1,000 articles and wrote 9 books. You can find out more about him at http://NathanSegal.org.