CSS Basics Tutorial-Media Query screen adaptation

This paper is the official HTML5 training course for Brother Lian it education organization, mainly introduces: CSS basic Tutorial--Media Query screen adaptation

Responsive layout

How to use Media Query
In the example above, we used media queries to use 3 different styles based on 3 different sizes of Windows. By defining style sheet rules with different media types and conditions, media queries allow CSS to work more precisely on different media types and different conditions for the same media. Most media features of media queries accept Min and Max to express "greater than or equal to" and "small and or equal". Such as: Width will have min-width and max-width media queries can be used in CSS @media and @import rules, can also be used in HTML and XML. With this tag property, we can easily achieve a rich interface under different devices, especially mobile devices, will be more widely used. The values that the media query can get are as follows:
Device width and Height device-width,device-heigth display screen/tactile device.
The width and height of the render window width,heigth display screen/haptic device.
The handheld direction of the device, transverse or vertical orientation (portrait|lanscape) and printer.
Screen ratio aspect-ratio dot matrix printer.
Device ratio device-aspect-ratio-dot matrix printer.
The object color or color list color,color-index the display screen.
The resolution of the device is resolution.

Grammatical structure and usage

There are two ways to use media queries, one is to embed "@media" in CSS styles, and to write different styles in the same CSS through different windows. The other is to use a reference to an external style sheet, use "@media" in @import and link, and select the corresponding style file according to the different window sizes. The two methods are used the same way. The use of Media queries is as follows:

@media Device type only (select condition) not (pick condition) and (device properties), device two {style code}

A reference to an external style sheet is supported in the Media queries module in CSS3, using the following code for the method type:

@import URL (color.css) screen and (min-width:1000px); /* Import CSS files using @import */
Or:
<link rel= "stylesheet" type= "Text/css" media= "only screens and (max-width:480px), only screens and (max-device-width:48 0px) "href=" Link.css "rel=" external nofollow "/>/* Import external CSS files using link */
Shorthand:
<link rel= "stylesheet" type= "text/css" media= "screen and (max-width:480px) href=" Link.css "/>

The above use only can be omitted, limited to the computer monitor, the first condition max-width refers to the maximum width of the rendering interface, the second condition max-device-width refers to the maximum width of the device. An example of a code that embeds @media in a style sheet is as follows:

@media screen (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width : 480px) and (Orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait ) {Style Code}
Shorthand:
@media screen and (max-width:640px) {style code}
In the example code above, the computer display resolution (width) is greater than or equal to 1024px (and the maximum visible width is 989px), the screen width is in 480px and below the handheld device, the screen width in 480px and horizontal (that is, 480 size parallel to the ground) of the handheld device placed , the screen is large or equal to 480px less than 1024px, and vertical placement of the device's CSS style. As can be seen from the above example, the character putting is concatenated with a space, the selection condition is enclosed in parentheses, and the style code is a compatible set of style sheets, enclosed in brackets. Only (limited to a certain device, can be omitted), and (logical AND), not (excluding a certain device) is a logical keyword, a variety of devices separated by commas, which inherits the basic CSS syntax.

Types of devices available

In the syntax above, such as embedding "@media" in CSS, you must write "@media" at the beginning, and then specify the device type (the above example uses screen to represent a computer monitor). There are 10 device types defined in the CSS, and the value you can specify is the type of device that the value represents, as shown in table 1-20:
Table 1-20 The value that can be specified in media queries and the device type that the value represents
You can specify the value setting type
All devices
Braille Braille, which is blind using the dot-word haptic feedback device
Embossed Braille Printer
Handheld Handheld portable Device
Print Document printing paper or Print preview view mode
Projection various projection equipment
Screen Color Computer monitor
Speech language and audio synthesizer
TTY Fixed letter spacing grids for media, such as telex typewriters and terminals
TV set Type equipment

Available Device feature parameters

Device types allow you to differentiate between the devices used, and then set different models of the same device through the device properties parameters. For example, specify a computer monitor by device type, and then use the device characteristic parameter to refer to a display with a large screen. Device characteristics are written in a manner similar to the way the style is written, divided into two parts, which are separated by a colon, a characteristic of the device before the colon, and the specific value of the character after the colon. For example, "(min-width:320px)". There are 13 settings in CSS, a collection similar to CSS properties. Unlike CSS properties, however, the specification of most device attributes accepts Min/max prefixes, which are used to represent logic greater than or equal to or less than equals, to avoid the use of "<" and ">" characters. A description of these 13 device characteristic parameters is shown in table 1-21:
Table 1-21 Description of 13 types of device features
attribute to specify whether the value of the available media type accepts
Min/max prefix feature description
Width Band unit Length value
For example: 640px visual screen/Touch device allows you to define the width of the page visible area in the output device (in pixels), which is the width of the browser window
Heigth length value of the band unit
For example: 320px visual screen/Touch device allows you to define the height of the visible area of the page in the output device (px in general), which is the height of the browser window
Device-width length value of the band unit
For example, the 640px visual screen/Touch device allows you to define the screen visible width (in pixels) of the output device, which is the width value of the device's screen resolution
Device-heigth length value of the band unit
For example: 320px visual screen/Touch device allows you to define the screen visible height of the output device (in pixels), which is the height value of the device's screen resolution
Orientation can only specify two values:
The portrait or Landscape bitmap media type does not allow the browser window to be in portrait or landscape orientation when the window quotient is greater than or equal to the width value of the attribute value is portait (landscape), otherwise landscape (vertical)
Aspect-ratio Proportional Value
For example, the 16/9-bit Graph media type allows you to define the ratio of ' width ' to ' height ', which is the aspect ratio of the browser
Device-aspect-ratio Proportional Value
For example, the 16/9-bit Graph media type allows you to define the ratio of ' device-width ' to ' device-height ', which is the device screen aspect ratio. such as the common display ratio: 4/3, 16/9,16/10
Color integer value The visual media allows the device to use a number of bit-value values, if not the color device, the value equals 0
Color-index integer value Visual Media allows the number of colors in the color table
Monochrome integer value visual media allows you to define the number of monochrome originals that are contained per pixel in a single-color frame buffer. If it is not a monochrome device, the value is equal to 0
Resolution resolution Value
For example, the 300dpi bitmap media type allows you to define the device resolution. such as: 96DPI,300DPI,118DPCM
A scan can specify only two values:
Progressive or Interlace TV class does not allow the definition of a TV class device scan mode, progressive progressive scan, interlace interlaced
A grid can specify only two values:
A 0 or 1 raster device is not allowed to query whether the output device is using a raster or bitmap-based. 1 means yes, 0 means no

You can use the AND keyword to specify the style that is used when the value of an attribute of a device type satisfies a condition, such as the following statement specifies the style used when the device window width is less than 640px:

@media screen and (max-width:640px) {style code}

You can use multiple statements to apply the same style to different device types and device attributes, as shown in the following way:

@media handheld and (min-width:360px), screen and (max-width:480px) {style code}

You can add the NOT keyword or the only keyword to an expression, and the NOT keyword indicates that the following expression is reversed, and the writing method resembles the following:

/* Style code will be used in devices other than portable devices or in non-color portable devices */
@media not handheld and (color) {style code}
/* Style code will be used in non-color devices */
@media all and (not color) {style code}
The purpose of using the only keyword is to hide the style of the expression from browsers that do not support media queries but can read media type. For example:

@media only screen and (color) {style code}

The above statement will be able to correctly apply the style to devices that support media queries, just as it does not exist. For devices that do not support media queries but are able to read media type (for example, IE8 only supports "@media screen"), this style is ignored because only the first read is not screen. For browsers that do not support media queries, such as the browser before IE8, this style is ignored, whether or not only.
Set the original size display on a mobile device

The iphone family and ipod touch are using the Safari browser, which supports the media query expressions described earlier. For example, using the iphone resolution is 320pxx480px to access our previous layout example, but not the result we want to see, not from top to bottom display, but with the computer monitor access to the same layout. Why is that? Because the Safari browser used in the iphone displays the width of the window as 980px when the page is displayed, because too many pages are made according to the standard of about 800px, the Safari browser is displayed by default in 980px width. You can display most of the pages normally. So even if the page has a style that runs in a small window, the Safari browser in the iphone doesn't use this style, and instead chooses the style used when the window is 980px wide. So we need to set the original size display and whether to scale the declaration on the mobile device. is to add the following statement between the

<meta name= "viewport" content= "width=device-width; initial-scale=1.0 "/>
Or
<meta name= "viewport" content= "width=600px"/>
The viewport property of the META tag is a declaration that sets the original size display and whether to scale on the mobile device. The parameters you can use are set as follows:
Width of the Width:viewport
The height of the Height:viewport
Initial-scale: Initial zoom ratio
Minimum-scale: The minimum scale to allow the user to zoom
Maximum-scale: Allows the user to zoom to the maximum scale
User-scalable: Whether the user can manually scale

If you have a style in a small window that you already have in your page, and you might be able to open it in your iphone or ipod Touch, don't forget to add the <meta> tag and write the specified window width in the label. In fact, you can pretend to be a wider screen by viewport.

CSS Basics Tutorial-Media Query screen adaptation