Original article: Introduction to CSS3 Media Queries
Original Article Date: January 1, February 21, 2014
Translated on: February 1, February 26, 2014
Translated by: Tie
Introduction
With the increasing popularity of mobile devices, web developers need to ensure that their websites are well displayed on different devices. An important means of display is to apply different CSS rules for different devices. Media queries allows you to apply different CSS rules to different media types and functions. This article explores what CSS3 mediainfo queries are and how to use them on your web pages.
CSS3 Media Queries Overview
To learn about CSS3 media queries, let's assume that you want to create a web page that can be accessed by desktop computers and mobile devices. When a PC accesses your web page, it will use a screen device with rich functions and good resolution and color support. On such devices, you can easily display three columns of layout. The middle column is used to display the core content of the web page. The remaining two columns can display some auxiliary content or advertisements. If the same web page is accessed by a smartphone, you cannot use this layout because the screen width and height are limited. In this case, you may only want to display a column consisting of core content. In addition to layout, you can also adjust the font size and color. This requires that different request devices use different CSS rules. This is the application of CSS3 for media queries. You can use CSS3 to query the list of media types and functions. If the requested device meets the specified standard CSS rule, the following rule is applied to the web page and displayed to the user. Not only are CSS rules, you can also switch the entire style sheet according to the request device.
The following figure shows how the same web page is displayed on the desktop and iPhone (in fact simulated through the Safari Desktop browser.
Figure 1 Comparison between a web page and an iPhone on a PC contains the same elements. The first is the desktop display effect, and the second is the mobile version effect. This change is implemented through CSS3 media queries.
Media query can use media types and features. Media type indicates the type of the target device. Media types include:
All (all device types) screen (computer screen) handheld (handheld device) TV (TV device) media features include some parameters:
The maximum and minimum size of the browser window (width and height) the width and height of the screen (landscape or portrait) Now you have some basic knowledge about media queries, let's continue to learn how to write media queries.
Compile Media Queries
As mentioned above, we can use CSS query in two ways. The first is to place the edited media query in Tag. When the media query expression is calculated as true, the specified style table is loaded, or you can place the edited media query in the style table file, when the media query expression is calculated as true, the corresponding CSS rule is applied.
Let's first look at how to write a media query and place it in a style sheet file. This technology requires @ media CSS rules. To learn how to use @ media, create a new HTML page and add the following tag:
Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! The above page contains an element with the mycontentCSS class. Contains some test content. The mycontent CSS class is defined in StyleSheet1.css. For this reason, create a new sample table and name it stylesheet1.css. Then add the CSS style rules:
@media (min-width: 1000px) { .mycontent { width:500px; background-color:#ffd800; color:#ff0000; border:2px solid red; padding:5px; }}@media (max-width: 600px) { .mycontent { width:200px; background-color:#00ff90; color:navy; border:2px solid darkblue; padding:2px; }}The preceding CSS defines two media queries. The first media query checks whether the min-width attribute is at least 600 pixels. The min-width attribute specifies the minimum requirement for visible areas on the device. In the preceding example, if the minimum visible area is greater than 1000 px, the specified mycontent CSS class rule is applied to the element. The second media query uses the max-width attribute. The maximum width attribute indicates that if the viewing area is less than 600 px, the following CSS rule is applied.
Test the preceding media query on a desktop computer, open a web page in a browser (such as Chrome), and maximize the browser window so that the viewing area is greater than 1000 px. The web page looks like this:
Figure 2 If the width is greater than 1000 px and the size of the browser window is changed to 600 px, the displayed content should change to the following:
Figure 3 the width is less than 600 px. At present, we have not considered the situation where the area is between 600px-1000px, but you can easily provide a default mycontent class for these cases.
In the preceding media query, the media type is not explicitly specified for "all.
Of course, you can also use media types to achieve equivalent results:
@media screen and (min-width: 1000px) { .mycontent { width:500px; background-color:#ffd800; color:#ff0000; border:2px solid red; padding:5px; }}@media screen and (max-width: 600px) { .mycontent { width:200px; background-color:#00ff90; color:navy; border:2px solid darkblue; padding:2px; }}We can see that the preceding query uses the media type screen and media features min-width and max-width.
You can also specify multiple conditions in a media query. For example, you can write the following media queries to view the situation where the area is between 600 px-1000 px.
@media (min-width: 600px) and (max-width:1000px) { .mycontent { width:350px; background-color:#ff00dc; color:navy; border:2px solid #4800ff; padding:2px; }}We can see that the preceding media query combines the min-width and max-width parameters. If you adjust the browser window, you will see the following results when the area is in the above range:
Figure 4 the width of the visible area is used in the preceding example between 600 px-1000px. If you want to check the screen size, you can use the max-device-width and max-device-height parameters. To learn more about multimedia queries, click here.
Use Media query to switch the style sheet
In the previous example, you used a single style sheet to manage different media queries. Sometimes you may need to use a completely different style sheet for different media features. For example, you may have a style sheet for large screen sizes. These are fonts, font sizes, colors, and overall la s for desktop computers. On the other hand, you may define completely different appearances and feelings for web pages on mobile devices, such as fonts, font sizes, and layout elements. In this case, you can place your own styles in different style sheet files to make them more clean and easy to maintain.
To apply a style sheet to a browser, you must specify a media file to query the web page. Element. Consider using the following tag:
If the media token specified in the media query is calculated as true, stylesheet2.css is used. In this case, the media query checks whether the requested device's visible area is greater than 1000 px. The flag of the second row specifies that if the visible area is less than 600 px, stylesheet3.css is applied.
From the above example, we can see that the media attributes mentioned in the media query are the same as the @ media attribute you used earlier. To test the media attributes, place the two dimensions of the mycontent csscategory in two sample tables (stylesheet2.cssand stylesheet3.css), and add the above mark on the main webpage. If you open a web page in a browser, you should get the same result as when you used to determine the browser size.
Summary
CSS3 media queries allow you to apply CSS rules based on media types and media features. This makes it easy to apply different CSS rules to the request device. Media features such as device size, visible area, and screen direction can be tested using media queries. In general, media query is a popular new CSS function. web developers who develop websites for mobile devices will find this function particularly attractive.
Reading
Using CSS3 to Jazz up your Web Forms
Creating a Complete Web Page With HTML5
