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:

CSS
Copy to clipboard
1@media screen and (max-width: 600px) {
2    body {
3        background-color: lightblue;
4    }
5}

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.

CSS
Copy to clipboard
1@media (min-width: 480px) {  
2  .planet-menu > .planet-hidden {
3    display: block; /* Show the menu when the screen is wide enough */
4  }
5}

Media features enable us to create more refined responsive designs. The combination of min-width and max-width media features allows us to target a specific range of screen sizes. The orientation feature helps us apply different styles based on the device's landscape or portrait orientation, while aspect-ratio addresses the screen's width-to-height ratio.

To apply styles to screens ranging from 600px to 900px, try:

CSS
Copy to clipboard
1@media screen and (max-width: 900px) and (min-width: 600px) {
2    body {
3        background-color: coral;
4    }
5}

Let's have a look at examples of using media queries with aspect ratio, and screen orientation. The media feature aspect-ratio can be used to apply styles based on the aspect ratio of the viewport.

In this example, the background color of the body will only become lavender if the aspect ratio of the viewport is 16/9.

CSS
Copy to clipboard
1@media screen and (aspect-ratio: 16/9) {
2  body {
3    background-color: lavender;
4  }
5}

This can be very useful especially with more widescreen devices becoming commonplace.

We can also target device orientation, either landscape (width greater than height) or portrait (height greater than width).

CSS
Copy to clipboard
1@media screen and (orientation: portrait) {
2  body {
3    font-size: 1em;
4  }
5}
6@media screen and (orientation: landscape) {
7  body {
8    font-size: 1.5em;
9  }
10}

These rules will apply a larger font size when the screen is in landscape orientation and a smaller size when in portrait mode.

Congratulations! You've just navigated a significant step in web design: cross-screen rendering. You've explored the problems that arise when dealing with varying screen sizes and utilized media queries in CSS to address them. Are you ready for practice? Apply these skills with the following exercises. Watch as your websites sparkle across all devices!