Mastering Cross-Screen Rendering: Media Queries Explained

Hello, and welcome to this lesson about cross-screen rendering. We'll closely examine the challenges associated with displaying the same website on different devices and browsers. We'll also explore the problems that arise due to varying screen sizes. Lastly, we will shed light on a crucial tool in your web design toolbox: media queries in CSS, focusing on how media features like min-width, max-width, orientation, and aspect-ratio can be utilized to create versatile web designs.

Web users access websites through a variety of devices and browsers. For example, while some people might be browsing your website from a small smartphone screen using Chrome, others might be viewing the same site on a large desktop monitor using Safari. The variety in user settings can cause a single website to render differently from one setup to another. Therefore, an essential aspect of web development is ensuring that all users receive an optimal site experience, regardless of their device or browser.

Consider a situation where you've designed a website using a standard desktop computer. It looks great on the screen in front of you, but what happens when someone tries to access the site from a smartphone? The different screen sizes could significantly affect the appearance and functionality of your site. To address this issue, we need our web design to be responsive, ensuring your websites adapt to the viewer's screen size.

Media queries play a crucial role in creating a responsive website. They allow us to apply different CSS rules based on specific parameters, like screen size or device type.

To perform a media query, we use the syntax @media <target> and (<conditions>) {/* Styles here */}. Here target is the element we want to monitor.  When the target satifies conditions, the style inside the {} block is applied to our webpage.  The below code specifies the screen as the target. When the width of the screen is 600px or less, the background-color of the body turns light blue:

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

For screens smaller than 600px in width, the body's background color changes. This demonstrates how media queries can modify the page's style based on the viewer's device.

Similarly, we can define min-width to target screens wider than a specific value; in the example below the screens wider than 400px are targetted. Notice that we shortened the @media screen to @media, screen is the default media type in CSS media queries. Additionally, pay attention to the .planet-menu > .planet-hidden syntax; this is the CSS selector. It targets elements with the class planet-hidden that are direct children of elements with the class planet-menu.

@media (min-width: 480px) {  
  .planet-menu > .planet-hidden {
    display: block; /* Show the menu when the screen is wide enough */
  }
}