What does bootstrap media query do?

In Bootstrap, media queries can distinguish the device used by the screen size and set different styles. Different styles can be used under different conditions to achieve different renderings of the page under different terminal devices. Effect.

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

bootstrap media query distinguishes you by the size of the screen Devices used

• Additional small devices (phones, less than 768px)

• Small devices (tablets, from 768px)

• Medium-sized devices (desktop computers, starting at 992px)

• Large-sized devices (large desktop computers, starting at 1200px)

Media queries can use different styles under different conditions, so that the page can achieve different rendering effects under different terminal devices. Previously, we briefly introduced how Media Query is referenced into the project, but media queries have their own usage rules. Specifically, here's how to use media queries.

@media 媒体类型and （媒体特性）{你的样式}

Note: When using media queries, you must start with "@media", then specify the media type (can also be called device type), followed by specifying media characteristics (can also be called device characteristics). The writing method of media properties is very similar to the writing method of styles. It is mainly divided into two parts. The first part refers to the media properties, and the second part is the value specified by the media properties, and a colon is used between the two parts. Separate. For example:

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. Maximum width max-width

"max-width" is the most commonly used feature among media features, which means that the media type is smaller than Or equal to the specified width, the style takes effect. For example:

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

The above means: when the screen is less than or equal to 480px, the advertising blocks (.ads) in the page will be hidden.

2. Minimum width min-width

"min-width" is the opposite of "max-width", which means that 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 properties

Media Queries can use the keyword "and" to combine multiple media properties together. In other words, a Media Query can contain 0 to 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 background color of the 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 corresponding width according to the size of the screen device. style (or call the corresponding style file). Similarly, for screen devices, you can also use the "min/max" corresponding parameters, 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 that is suitable for the maximum device width of 480px, such as the display on the iPhone. The "max-device-width" here refers to the actual device width. Resolution, which refers to the visual area resolution.

5. Not keyword

Using the keyword "not" is used to exclude a certain specified media type, that is, to exclude devices that match the expression. . In other words, the not keyword means to perform the inversion operation on the following expression, such as:

@media not print and (max-width: 1200px){样式代码}

The above code indicates that the style code will be used on all devices except printing devices and device widths less than 1200px middle.

6. The only keyword

only is used to specify a specific media type and can be used to exclude browsers that do not support media queries. In fact, only is often used to hide style sheets for devices that do not support Media Query but support Media Type. The main ones are: for devices that support media features, if the style is called normally, then it will be treated as if only does not exist; for devices that do not support media features but support media types, the style will not be read because it will read only first and then Not screen; in addition, browsers that do not support Media Queries, regardless of whether they support only, the style will not be used. For example,

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

If the Media Type is not explicitly specified in Media Query, the default is all, such as:

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

In addition, in the style, you can also use multiple statements to change the same style. Applies to different media types and media characteristics, specified as follows.

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

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 queries are supported by many browsers, and are perfectly supported in all modern browsers except IE6-8 browsers. Another difference is that media queries do not need to be prefixed in different browsers like other CSS3 properties.

[Related recommendations: "bootstrap tutorial"]

The above is the detailed content of What does bootstrap media query do?. For more information, please follow other related articles on the PHP Chinese website!