Media Queries----Press Query @media

Source: Internet
Author: User

With the continuous development of science and technology, Web browsing terminals are becoming more and more diverse, and users can access your website through: Widescreen TVs, desktops, laptops, tablets and smartphones. Although you can't guarantee that a website will look exactly the same on different screen sizes and devices, at least let your Web page fit into the user's terminal, so that he can be better presented to your users. In this section, you'll learn how to use the Media queries module in CSS3 to adapt a page to a different terminal (or screen size), allowing your page to have a better experience for the user.

Media Queries

Media queries is a new module feature added to CSS3, its biggest feature is to query the media through CSS3, and then call the corresponding style. Actually this function has appeared in the CSS2.1, only then this function is not powerful, our most common is to add the printing style to the printing device. With the changing times, this module is becoming more and more powerful.

In a thorough understanding of media queries we need to understand two important parts, the first is the media type and the second is the media feature. Let's take a look at these two sections in a nutshell:

I. Type of media

Media type is a common attribute in CSS2 and is a useful property that allows you to specify different styles for different devices through the media type.

In the CSS2 often encountered is all (full),screen, print(page printing or print preview mode), in fact, the media type far more than the three kinds, the world's total list of 10 media types. As shown in the following table:

Value

Device type

All

All devices

Braille

Braille Tactile feedback device for the blind

Embossed

Braille Printers

Handheld

Portable Devices

Print

Print paper or Print preview view

Projection

Various projection devices

Screen

Computer monitor

Speech

Voice or audio synthesizer

Tv

TV Type Equipment

Tty

Media using fixed density letter grids, such as telex typewriters and terminals

Screen , all, and Print are among the three most common media types.

In the actual media type has nearly 10 kinds of, the actual commonly used is so many, but the media type of reference method also has a variety of, common are:link tag ,@import and CSS3 new @media several:

Link method

The link method introduces the media type in fact, when the <link> tag refers to the style, the media property in the link tag is used to specify a different medium type. as shown below.

Media= "Print"/>

@import method

@import can reference a style file and can also be used to reference a media type. There are two main ways @import introduce media types, one is to call another style file in a style through @import, and the other is to use the <style></style> in the

@importurl (reset.css) screen;   @importurl (print.css) print;

The media type method is introduced in the <style> tag in

@media method

@media is a new feature introduced in CSS3, called Media query. This property can also be used in the page to introduce the media type. @media the introduction of media types and @import a bit similar also has two ways.

(1) Reference the media type in the style file:

@media Screen {   Selector {/* Your style code is written here ... */}}

(2) The way to introduce media types using @media is referenced in <style> in the


Media queries how to use

To understand these conceptual things, the students want to know how to use media queries? Let's explore how it's used:

Media queries can use different styles under different conditions to make the page different rendering results under different terminal devices. The previous section briefly describes how media queries is referenced to the project, but media queries has its own rules for using it. Specifically, Media queries is used as follows.

@media Media type and (media attribute) {your style}

Note: You must use media queries to start with "@media", then specify the media type (also known as the device type), followed by the specified media characteristics (also known as device features). The way the media is written and the style is written in a very similar way, mainly divided into two parts, the first part refers to the media characteristics, the second part is the media characteristics of the specified value, and the two parts are separated by a colon. For example:

(max-width:480px)

As you can tell from the previous table, there are 10 media types and 13 media features, which are grouped in a similar way to different CSS collections. Unlike CSS properties, however, media features are judged by Min/max to represent greater than or equal to or less than a logical judgment, rather than using symbols less than (<) and greater than (>). Let's take a look at the ways media queries are used in real-world projects.

1. Max width max-width

"Max-width" is the most commonly used feature in media features, meaning that the style takes effect when the media type is less than or equal to the specified width. Such as:

@media screen and (max-width:480px) {. ads {   display:none;  }}

The above indicates that when the screen is less than or equal to 480px, the ad block (. ads) on the page will be hidden.

2. Minimum width min-width

"Min-width", in contrast to "max-width", refers to when the media type is greater than or equal to the specified width, the style takes effect.

@media screen and (min-width:900px) {. wrapper{width:980px;}}

The above means: when the screen is greater than or equal to 900px, the width of the container ". Wrapper" is 980px.

3. Use of multiple media features

Media queries can use the keyword "and" to combine multiple media features. That is, a media query can contain between 0 and more expressions, and the expression can contain 0 to more keywords, as well as a media type.

When the screen is between 600px~900px, the body's background color is rendered as "#f5f5f5" as shown below.

@media screen and (min-width:600px) and (max-width:900px) {  body {background-color: #f5f5f5;}}
4. Output width of device screen devices width

On smart devices, such as the iphone, ipad, and so on, you can also set the appropriate style (or call the appropriate style file) based on the size of the screen device. Similarly, for screen devices, you can also use the "Min/max" corresponding parameter, such as "Min-device-width" or "max-device-width".

<link rel= "stylesheet" media= "screen and (max-device-width:480px)" href= "Iphone.css"/>

The above code refers to the "IPHONE.CSS" style for the maximum device width of 480px, such as the display on the iphone, where "max-device-width" refers to the actual resolution of the device, that is, the visual area resolution.

5. Not keyword

The use of the keyword "not" is used to exclude a certain type of media, that is, to exclude an expression-compliant device. In other words, the NOT keyword indicates that the following expression is reversed, such as:

@media not print and (max-width:1200px) {style code}

The code above indicates that the style code will be used in all devices except the print device and device width of less than 1200px.

6.only Keywords

Only is used to specify a specific media type that can be used to exclude browsers that do not support media queries. In fact, only many times it is used to hide style sheets for devices that do not support media query but support media type. It mainly includes: the device that supports the media characteristic, the normal invocation style, when only does not exist, indicates that the media is not supported, but the media type of the device, so it will not read the style, because its first will read only instead of screen, but also does not support the media queries browser, Styles are not used, whether or not they are supported. Such as

<linkrel= "stylesheet" media= "only screens and (max-device-width:240px)" href= "Android240.css"/>

If media Type is not explicitly specified in media query, it defaults to all, such as:

<linkrel= "stylesheet" media= "(min-width:701px) and (max-width:900px)" href= "Mediu.css"/>

In addition, in styles, you can also use multiple statements to apply the same style to different media types and media attributes, as indicated below.

<linkrel= "stylesheet" type= "Text/css" href= "Style.css" media= "handheld and (max-width:480px), screen and (min-width : 960px) "/>

The style.css style in the code above is used on a handheld device with a width less than or equal to 480px, or on a device with a screen width greater than or equal to 960px.

So far, CSS3 Media queries has been supported by a wide range of browsers, in addition to the ie6-8 Browser, which is perfectly supported in all modern browsers. There is a difference,Media queries in other browsers do not like other CSS3 properties in different browsers to add prefixes .




Media Queries----Press Query @media

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.