CSS Basics Tutorial-Media Query screen adaptation

How to use responsive layout media Query in the previous example, 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:? width and height of the device device-width,device-heigth display screen/tactile device. The width and height of the render window/haptic device. The handheld direction of the device, Horizontal or vertical orientation (portrait|lanscape) and printers, and so on. Screen scale aspect-ratio dot matrix printer, etc., device proportion device-aspect-ratio-dot matrix printer, etc.? The object color or color list color,color-index the display screen. The resolution of the device resolution. Syntax structure and usage media queries are used in two ways, one is to embed "@media" in CSS styles, Write different styles in the same CSS with different windows to choose from. 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. Media queries is used as follows: @media device type only (select condition) not (select condition) and (device properties), device two {style code} supports references to external style sheets in the media queries module in CSS3, using                The method type is the following code: @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:480px) "href=" Link.css "rel=" external nofollow "/>/* Import external CSS file using link */abbreviated: <link rel=" Stylesheet "type=" text/css "media=" screen and (max-width:480px) href= "Link.css"/> above in use only can be omitted, limited to computer monitors, The first condition max-width refers to the maximum width of the rendering interface, and 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 shown below: @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, set the computer monitor resolution (width) greater than or equal to 1024px ( and the maximum visible width is 989px), the screen width in 480px and the following handheld devices, the screen width in 480px and horizontal (that is, 480 dimensions parallel to the ground) of the handheld device, the screen is large or equal to 480px less than 1024px and vertically placed device 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 (logic and), not (excluding a device) is a logical keyword, a variety of devices separated by commas, which inherits the basic CSS syntax.? The available device types are 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, the values that can be specified and the type of device represented by this value are shown in table 1-20: Table 1-20 values that can be specified in media queriesThe value that is represented by the device type can be specified by setting the type all device Braille Braille, The Braille printer Handheld handheld portable device print document printing paper or Print preview view mode projection various projection devices screen Color Computer monitor screens speech language and audio synthesizer TTY fixed letter spacing grid media embossed , such as telex and terminal TV type devices? The available device feature parameters can be differentiated by device type, and then set different models of the same device through the device characteristic 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 13 Description of device characteristics Specifies whether the value available media type accepts the Min/max prefix attribute describes the length value of the width band unit for example: 640px visual screen/ Touch devices allow you to define the width of the page visible area in the output device (typically PX), that is, the width of the browser window heigth the length value with units such as: 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), That is, the height of the browser window device-width the length value with units For example: 640px visual screen/Touch device allows you to define the screen visible width of the output device (in pixels) That is, the width value of the device's screen resolution device-heigth the length value of the band unit for example: 320px visual screen/Touch device allows you to define the screen visibility height of the output device (PX in general) That is, the height value of the device screen resolution orientation can only specify two values: the Portrait or Landscape bitmap media type does not allow the browser window's orientation to be portrait or landscape, when the window quotient is greater than or equal to the width value is the attribute value of portait (Landscape), Otherwise landscape (vertical) Aspect-ratio scale values such as the 16/9-bit Graph media type allow for the definition of the ratio of ' width ' to ' height ', which is the aspect ratio of the browser device-aspect-ratioScale values such as the 16/9-bit Graph media type allow the definition of the ratio of ' device-width ' to ' device-height ', which is the device screen aspect ratio. such as the common monitor ratio: 4/3, 16/9,16/10color integer value Visual media allows the device to use the number of bit color values, if not the color device, The value equals 0color-index integer value The 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 in a single-color frame buffer per pixel. If it is not a monochrome device, the value equals the 0resolution resolution value such as the 300dpi bitmap media type allows you to define the device's resolution. Such as: 96dpi,300dpi,118dpcmscan can only specify two values: Progressive or Interlace TV class does not allow the definition of the TV class device scanning mode, progressive progressive scan, Interlace interlaced grid can only specify two values: 0 or 1 raster devices are not allowed to query whether the output device is using Rasters or bitmap-based. 1 represents 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: @media handheld and (min-width:360px), screen and (max-width: 480px) {Style code} You can add the NOT keyword or the only keyword to the expression, and the NOT keyword indicates that the following expression is reversed, and the writing method is similar to the following:/* The style code will be used in devices other than portable devices or non-color portable devices */@media Not handheld and (color) {Style Code}/* style code will be used in a non-color device */@media all and (not color) {style code} uses the only keyword to allow those that do not support media queries but A browser that is capable of reading media type hides the style of the expression. For example: The statement above @media only screen and (color) {style code} will be able to apply the style correctly for devices that support media queries, as if only there were no。 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. Setting the original size on the mobile device is shown in the iphone series and ipod Touch is 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 head 
This article is the official HTML5 training course of h5edu agency, Main introduction: CSS Basic Tutorial--Media Query screen adaptation

CSS Basics Tutorial-Media Query screen adaptation