HTML From Beginner to Advanced, Last Part: Media Queries
Let’s learn everything about Media Queries
1. Media Queries and Responsive Design, Introduction
5. Media Queries and mobile browsers
Media Queries and Responsive Design, Introduction
Nowadays responsive design is a real concern for every web developer. Mostly because websites need to adapt to a multitude of different devices meaning screen size of resolutions.
This information is important when create a design: how should your website be displayed for different screen resolutions?
This is where the media queries are useful. They are CSS rules to apply to change the design of a website according to the characteristics of the screen! With this technique, we can create a design that automatically adapts to the screen of each visitor!
The media queries are among the new CSS3 features. Soon the CSS full course. These are not new properties but rules that can be applied under certain conditions.
Concretely, you will be able to say “If the resolution of the visitor’s screen is less than so, then apply the following CSS properties”. This allows you to change the appearance of the site under certain conditions: you can increase the size of the text, change the background color, position your menu differently in certain resolutions, etc.
The media queries do not concern only screen resolutions. You can change the appearance of your website according to other criteria such as the type of screen (smartphone, TV, projector …), the number of colors, the orientation of the screen (portrait or landscape), etc.
Apply a Media Queries
Media queries are rules that indicate when to apply a certain CSS property. There are two ways to use them:
- by loading a different css file (ex: “If the resolution is less than 1280px wide, load the file small_resolution.css”);
- by writing the rule directly into the usual.css file (ex: “If the resolution is less than 1280px wide, load the CSS properties below”).
Load Media Queries
Do you remember the <link /> tag that allows us to load a .css file in our HTML code?
We can add a media attribute, in which we will write the rule that must apply for the file to be loaded. We say that we make a “media query”.
In the end, your HTML code could offer several CSS files: one default (which is loaded in all cases) and one or two others that will be loaded extra only if the corresponding rule applies:
Another technique, which we will prefer, is to write these rules in the same CSS file as usual. In this case, we write the rule in the file.css like this:
Media Queries rules
There are many rules for building media queries. Here are the main ones:
- color: color management (in bits / pixel).
- height: height of the display area (window).
- width: width of the display area (window).
- device-height: height of the device.
- device-width: width of the device.
- orientation: orientation of the device (portrait or landscape).
- media: type of output screen. Some of the possible values:
— screen: “classic” screen;
— handheld: mobile device;
— print: print;
— tv: television;
— projection: projector;
— all: all types of screens.
We can add the prefix min- or max- in front of most of these rules. Thus, min-width means “minimum width”, max-height “maximum height”, etc.
The difference between width and distance-width is perceived above all on the mobile browsers of smartphones.
The rules can be combined using the following words:
- only
- and
- Not
Here are some examples of media queries to help you understand the principle:
Media Queries and mobile browsers
As you probably know the screens of smartphones are much smaller than our usual screens (only a few hundred pixels wide). The display area is called the viewport: this is the width of the browser window on the mobile.
In CSS, with media queries, if you target the screen with max-width on a mobile, it will compare the width you specify with that of its viewport. The problem is that the viewport changes depending on the mobile browser used!
An iPhone 12 behaves as if the window was 844 px wide, while an Android behaves as if the window was 740 px for a Samsung phone!
To target smartphones, rather than using max-width, it may be interesting to use max-device-width: this is the width of the device. Mobile devices up to 480 px wide, we can target only mobile browsers with this media query:
You can change the viewport width of the mobile browser with a meta tag and insert it in the header (<head>) of the document:
You can use this tag to change the content organization of your page on mobile devices. For easy-to-read rendering without zooming, you can have the viewport the same as the screen width:
If you find my content helpful please consider making a donation at:
https://ko-fi.com/devondeveloper
This content it’s free but believe me, if you take a coding bootcamp or web development course there is no real difference with the information you just read. By making a donation You are helping to keep creating Great Quality content for You, so you can become the Best web developer you can be.
