Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the role of bootstrap media query. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

In Bootstrap, media query can distinguish the device used and set different styles by the size of the screen, and different styles can be used under different conditions, so that the page can achieve different rendering effects under different terminal devices.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap Media query identifies the device you are using by the size of the screen

Extra gadgets (mobile phone, smaller than 768px)

Small devices (tablet, 768px onwards)

Medium-sized equipment (desktop computer, from 992px)

Large equipment (large desktop computer, from 1200px)

Media query can use different styles under different conditions, so that the page can achieve different rendering effects under different terminal devices. I briefly introduced how the media query is referenced into the project, but the media query has its own usage rules. Specifically, the use of media queries is as follows.

@ media Media Type and (Media Features) {your style}

Note: to use a media query, you must start with "@ media", then specify the media type (also known as the device type), followed by the media characteristics (which can also be called device characteristics). The way media features are written is very similar to the style of writing, which is mainly divided into two parts, the first part refers to the media characteristics, the second part refers to the values specified by the media properties, and the two parts are separated by colons. For example:

(max-width: 480px) as you can see from the previous table, there are mainly ten media types and 13 media features, which are combined like different CSS collections. But unlike the CSS attribute, media properties are judged by min/max as a logical judgment of greater than or less than, rather than by symbols such as less than (). Next, let's take a look at the ways that Media Queries is commonly used in real-world projects.

1. Maximum width max-width

"max-width" is one of the most commonly used 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 advertising blocks (.ads) on the page will be hidden.

2. Minimum width min-width

"min-width" as opposed to "max-width" means that the style takes effect when the media type is greater than or equal to the specified width.

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

The width of the container ".wrapper" is 980px when the screen is greater than or equal to 900px.

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 0 to more expressions, which in turn can contain 0 to more keywords, and a media type.

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

@ media screen and (min-width:600px) and (max-width:900px) {body {background-color:#f5f5f5;}}

4. The output width of the device screen Device Width

On smart devices, such as iPhone, iPad, etc., you can also set the appropriate style (or call the appropriate style file) according to the size of the screen device. Similarly, the corresponding parameter "min/max" can also be used for screen devices, such as "min-device-width" or "max-device-width".

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

5. Not keywords

The use of the keyword "not" is used to exclude certain established media types, that is, devices that match the expression. In other words, the not keyword means to perform an inverse operation on the following expression, such as:

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

The above code indicates that the style code will be used in all devices except for printing devices and devices whose width is less than 1200px.

6. Only keywords

Only is used to specify a specific media type and can be used to exclude browsers that do not support media queries. Only is often used to hide stylesheets from devices that do not support Media Query but support Media Type. The main features are: devices that support media features, call the style normally, and assume that only does not exist at this time; devices that do not support media features but also support media types will not read the style, because it will first read only rather than screen;. Browsers that do not support Media Queries will not be adopted regardless of whether they support only or not. Such as

If Media Type is not explicitly specified in Media Query, it defaults to all, such as:

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

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

So far, CSS3 media query has been supported by many browsers, with the exception of IE6-8 browser, it can be perfectly supported in all modern browsers. Another difference is that media queries in other browsers do not add prefixes to different browsers like other CSS3 attributes.

The above is the role of the bootstrap media query shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.