CSS Basics Tutorial-Media Query screen adaptation

How to use the responsive layout media query  in the example above,  we use the 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 obtain 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. Syntax structure and usage media queries are used in two ways,  is to embed "@media" in CSS styles, and to write different styles in the same CSS through different windows.   Another is to use the reference,  in the external style sheet to use "@media" in @import and link to 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  (selection criteria)   not  (selection criteria)   and    (device features), device two  {  style code  } supports references to external style sheets in the Media queries module in CSS3,  use the method type as follows code: @import  url (COLOR.CSS)  screen and  (min-width: 1000px);                 /* importing CSS files using @import */ Or: <link rel= "stylesheet"  type= "Text/css"  media= "only screen and  (max-width:  480px),only screen and  (max-device-width: 480px) " href=" Link.css " rel=" External nofollow " />   /* using link to import external CSS files */abbreviated: <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, 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, screen width in 480px and horizontal (that is, 480 dimensions parallel to the ground) placed handheld devices , 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. Available device types in the syntax above, such as embedding "@media" in CSS, you must write "@media" at the beginning of the, , 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 type of device that can be specified and the value represented is shown in table 1-20: Table 1-20  in media  Queries can specify the value that the value represents for the device type can be specified by setting type all devices 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 a fax typewriter and a terminal TV-type device The device characteristic parameters can be differentiated by device type, and then set up different models of the same device by device characteristic parameters. For example, the device type specifies the computer monitor,  and then the device characteristic parameter refers to the display with a large screen. Device characteristics are written in a manner similar to the way the style is written,  is divided into two parts, in which a colon is split,  a colon before the writing device has a character,  the colon after writing the specific value of the attribute. For example, "(min-width:320px)". Setting properties in CSS There are 13 types of,  are a collection of CSS-like properties. Unlike CSS properties, however, the designation of most device attributes accepts Min/max prefixes,  used to represent logic greater than or equal to or less than equals, avoiding 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 of the available media type accepts the Min/max prefix attribute describes the length value of the width band unit for example: 640px visual screen/Touch device allows you to define the width of the visible area of the page in the output device (typically PX) That is, the width of the browser window heigth the length value with units For example: 320px visual screen/Touch device allows you to define the height of the page visible area in the output device (in pixels), that is, the height of the browser window device-width the length value of the unit, for example: 640px visual screen/ The 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 the length value with the unit, for example: 320px visual screen/Touch device allows you to define the screen visible height of the output device (px in general)   That is, the height value of the device screen resolution orientation can only specify two values:portrait  or  landscape bitmap media type does not allow the orientation of the browser window to portrait or landscape,  When the window quotient is greater than or equal to the width value is the attribute value is portait (landscape), otherwise landscape (vertical) Aspect-ratio scale value such as 16/9-bit Graph media type allows to define the ratio of ' width ' to ' height ', That is, the browser's aspect ratio Device-aspect-ratio scale 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 display 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 for Yes, 0 to indicate whether the and keyword can be used to specify that when a value of an attribute of a device type satisfies a,  For example, 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,  specified in a similar manner as follows: @media  handheld and  ( min-width:360px), screen and  (max-width: 480px)  {  style code  } You can add the NOT keyword or the only keyword in an expression, and the  not keyword indicates that the following expression is reversed,  The writing method is similar to the following:/*  style codes will be used in devices other than portable devices or in non-color portable devices  */@media  not handheld and  (color)  {  style code  }/*  style codes will be used in non-color devices  */@media  all and  (not color)  {  style code  } using the only keyword is useful for those that do not support media  Queries but the browser that can read the Media type device hides the style of the expression.   For example: @media  only screen and  (color)  {  style code  } The above statement is for support media  Queries devices will be able to correctly apply the style,  just as there is no existing. For devices that do not support media queries but are able to read Media type (for example, IE8 only supports "@media  screen"),  because the first read is only instead of screen,   will ignore this style. For browsers that do not support media queries (for example, IE8 before the browser),  whether or not only,  This style will be ignored. Setting the original size on the mobile device is shown in the iphone series and Ipod touch uses the media query expression described earlier in the Safari browser,  support.   For example, using the iphone resolution is 320px x 480px  to access our previous layout example, but not the results we want to see,  is not displayed from top to bottom,  It is the same layout that is accessed by the computer monitor. Why is that? Because the Safari browser used in the iphone displays the width of the window as a 980px when the page is displayed,  because too many pages are made according to the standard of about 800px,  As a result, the Safari browser defaults to the 980px width to display the vast majority of pages. So even if the page has been written to run in a small window, the Safari browser in  iphone does not use this style,  but 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 ish5eduAgency officialHTML5 Trainingtutorials, the main introduction:CSS Basics Tutorial--Media query screen adaptation
 
CSS Basics Tutorial-Media Query screen adaptation