We know bootstrap responsive layout is cool, but it is how to achieve it? Its official web page mentioned all of this credit comes from CSS media queries (Media Query).
Use @media query, you can define different styles for different media types.
@media can be set for different screen sizes different styles, especially if you need to set up a responsive design pages, @ media is very useful.
When you reset the browser size of the process, the page will be re-render the page according to the width and height of the browser.
First, several media of reference
1, reference directly in the head
This is our common reference, but many times we do not understand what that means. Feeling does not seem to play much role and the way we are likely to be ignored.
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />Meaning described here is: only if the current device is a computer screen, tablet PCs, smart phones, etc. before the introduction of the css style file
2, with the introduction of import style
But in order to be introduced in the following style,
<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max-width: 600px)">
@import url("css/style.css");
</style>Meaning described here is: only if the current device is a computer screen, tablet PCs, smart phones and 600px width less than or equal when it introduced the css style file
3, write directly @media code
bootstrap made using this method
@media print and (max-width: 600px) {
选择器 {
属性：属性值；
}
}Described herein is meant: only if the current device is a printer and a width less than or equal 600px file when it is introduced into the style
There may be questions about why max-width: 600px also said that less than 600px it?
Because there is simply more to meet the media type (media type) and media features (media feature) these two conditions was triggered inside the code, less than 600px refers to the maximum no more than 600px;
these two conditions are met and and and | not | process effect only three keywords that occur together called media queries (media query)
Second, grammar, media type and media as well as key features of the media explain
1, media grammar
Css media used for different styles, colors, for example, just the control, width, etc.
@media media type and|not|only (media feature) {
CSS-Code;
}Reference different styles css files for different media
<link rel="stylesheet" media="media type and|not|only (media feature)" href="mystylesheet.css">2, media type
Media type is media tyep, the usual values are:
| value | description |
|---|---|
| all | For all devices |
| For printers and print preview | |
| screen | For computer screens, tablets and smartphones. |
| speech | Applied to screen readers and other sound equipment |
3, media features
Media feature is the media feature, the usual values are:
| value | description |
|---|---|
| aspect-ratio | Definition of the output device page visible region of width to height ratio of |
| color | Defines the number of output devices of each group of color originals. If the device is not a color, then the value is equal to 0 |
| color-index | Defines the number of entries in the color look-up table in the output device. If you do not use a color lookup table, the value is equal to 0 |
| max-color | Define the maximum number of output devices of each group of color originals. |
| min-color | Each group of output devices defined minimum number of color originals. |
| max-color-index | It defines the maximum number of entries in the color look-up table in the output device. |
| min-color-index | Defines the minimum number of entries in the color look-up table in the output device. |
| device-aspect-ratio | Output devices visible screen definition width to height ratio. |
| min-device-aspect-ratio | An output device visible screen definition minimum ratio of width to height. |
| max-device-aspect-ratio | Visible screen definition output device width to height ratio of the maximum. |
| device-height | Screen definition output device highly visible. |
| device-width | Visible screen definition output device width. |
| grid | Used to query whether the output device using a grid or lattice. |
| height | Definition of the output device highly visible area of the page. |
| max-aspect-ratio | Visible screen definition output device width to height ratio of the maximum. |
| max-device-height | Screen definition output devices visible to the maximum height. |
| max-device-width | Screen definition maximum visible width of the output device. |
| min-device-width | Screen definition minimum visible width of the output device. |
| min-device-height | Minimum screen output apparatus defined highly visible. |
| max-monochrome | The maximum number is defined in a monochrome original monochrome frame buffer included in each pixel. |
| max-resolution | The maximum resolution of the device is defined. |
| min-aspect-ratio | Definition of the output device page visible region minimum ratio of width to height. |
| max-height | The maximum height of the visible area of the page is defined in the output device. |
| max-width | Definition of the output device in the visible region of the maximum width of a page. |
| min-height | Definition of the output device in the visible region of the minimum height of the page. |
| min-width | Definition of the output device in the visible region of the minimum width of a page. |
| min-monochrome | The minimum number of monochrome originals are defined in a single color per pixel frame buffer included |
| min-resolution | Minimum resolution defined devices. |
| monochrome | Define a number of monochrome original monochrome frame buffer for each pixel included. If the device is not monochromatic, the value is equal to 0 |
| orientation | Definition of the output device in the visible region of the height of the page is greater than or equal to the width. |
| resolution | Define the resolution of the device. Such as: 96dpi, 300dpi, 118dpcm |
| scan | Process definition television type scanning device. |
| width | Definition of the output device in the visible region of the page width. |
Then explain max-device-width and max-width difference
max-width refers to the width of the display area of the browser; max-width will change when the window is resized or vertical screen conversion.
max-device-width refers to the actual width of the screen device, i.e. a device resolution; max-device-width only associated with the device, will not change when the window is resized or vertical screen conversion.
4, explained three keys
Explanation
and the keyword is equivalent &&
not just be negated
only said they did not support the media features (Media feature) media type (Media Type) devices but support
Examples
not keyword examples:
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />Keywords are not used to exclude certain types of media developed, in other words meet the equipment is used to exclude expression.
only keyword examples
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
三、其他附加知识
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css">另外还有使用逗号（，）被用来表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width:480px), screen and (min-width:960px)" />