"Technology" Media queries mobile device style

Viewpoint setting adapts to mobile device screen size
(1) The main function of the viewpoint virtual window is to allow the developer to create a virtual window (viewpoint) and customize its window size and zoom capabilities.
Mobile Safari Virtual window default size is 980 pixels, Android Browser default is 800 pixels, ie default is 974 pixels, opera is 850 pixels

(2) Using viewpoint
defined in the META element, its primary role is to set the Web page to fit the mobile device's screen size <meta name= "Viewpoint" content= "width=device-width,initial-scale=1, User-scalable=0 "> The main function of this code is to customize the virtual window, and to set the virtual window width broadband to device-width, the initial scale size of 1, while not allowing users to use the manual zoom function
Content properties: Width, height, initial-scale, Maximum-scale, minimum-scale,user-scalable

(3) How Media queries works

① Maximum broadband value is 600px

<link rel= "stylesheet" media= "screen and (max-width:600px)" href= "Small.css" >

Within the SMALL.CSS style, you need to define the style of the media type

@media screen and (max-width:600px) {

. demo{
Background-color: #ccc;

}

}
② Maximum broadband value is 600-900px
<link rel= "stylesheet" media= "screen and (min-width:600) and (max-width:900px)" href= "Small.css" >
Within the SMALL.CSS style, you need to define the style of the media type

@media "screen and (min-width:600) and (max-width:900px) {

. demo{
Background-color: #ccc;

}

}
③ Maximum broadband value is 480px (MOBILE)
<link rel= "stylesheet" media= "screen and (max-device-width:480px)" href= "Small.css" >

Within the SMALL.CSS style, you need to define the style of the media type

@media "screen and (max-device-width:480px) {

. demo{
Background-color: #ccc;

}

}
Decide which style to apply when the orientation of a mobile device, such as the ipad, changes.

When the mobile device is in Portrait portrait mode, the portrait style file is applied, and the landscape style file is applied when the mobile device is in landscape landscape mode.
<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" > <link rel= "stylesheet" Media= "All and (Orientation:landscape)" href= "Landscape.css" >

④media Queries Grammar Summary
@media [Media_query] Media_type and Media_feature

Media_query query keywords, you can use not, only. Not negate this style only if a browser that does not support media queries but can read media type type is ignored.
Media_type specifying the device type (i.e. media type), a total of 10 device types

All devices
Screen display, notebook, mobile terminal and other devices
Aural, Braille, handled, print, projection, TTY, TV, embossed

Media_feature defines device features in CSS, and most mobile device features allow the prefix of Min and Max to be accepted

Width, Height
Device_width, Device_height

Orientation

Aspect_raido

Resolution

...

IE8 The following versions do not support media queries

"Technology" Media queries mobile device style