Media Query Examples in CSS

Introduction

Media query examples are very useful for building responsive websites since they allow for proper display of the website on devices of different resolution. Using media query examples, a developer can use a set of rules pointed depending on the specific parameters such as width, height or the orientation of the plane. As such, adaptability improves users’ experience, and websites work well on all mobile devices, laptops, and PCs.

Example 1 on Media Query Examples

body {
  background-color: green;
  color: black;
}

/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
    color: white;
  }
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
  body {
    background-color: red;
    color: white;
  }
}

Output

Example 2 Media Query Examples

A common use of media queries, is to create a flexible layout.

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

Output

Conclusion

Responsive and adaptative website designing can be achieved achieve through the use of CSS Media Queries. To determine the media to won on, the use of media queries is important as it enables the developer to create and design a web page to suit different media and certain displaying size.

Examples of CSS Media Queries in action include:Examples of CSS Media Queries in action include:

• Landscape and portrait views for mobiles, portrait and landscape for tablets, PCs, and other devices.
• Adjusting text font sizes and line height in order to easily read content on a low resolution screen.
• Resizing of specific aspects and main items, which are positioned depending on the available space on mobile devices.
• Changing images or background colors depending on the characteristics of the audience, the device.

Summing up, Media Queries are an easily implemented tool that allows CSS to provide print quality websites to users across all devices. If you get to know media queries right, then you will have the means of providing web experiences that are optimized for all the browsers and devices out there.

Frequently Asked Questions