Css3 responsive layout design-review, css3 response Layout

Css3 responsive layout design-review, css3 response Layout

The responsive design is to display different styles at different resolutions on different devices.
　　The media attribute specifies different styles for different media types. Remove the width and height of the browser and re-render the page.
Syntax: @ media mediatype and | not | only (media feature ){}
Example:
<Link rel = "stylesheet" media = "screen and (max-width: 600px)" href = "small.css"/>
Result: when the resolution is up to 600, the style in the style table is displayed.

　　Media type:

All for all devices

Print for printers and print Devices

Screen is used for computer screens, tablets, and smartphones.

Speech is used for voice devices such as readers.

　　Keywords:

The and operator is used to match the rules on both sides of the symbol if the conditions are met.

@ Media screen and (max-width: 600px ){
/* Match a computer screen with a width less than 600px */
}

The not keyword is used to exclude the media type of a certain system.
@ Media not print {
/* Match all devices except printers */
}
Only is used to specify a specific media type.
@ Media only screen and (min-width: 300) and (max-width: 500 ){
/* This section is only for color screen devices */
}

　　Media features: (commonly used)　　　

Max-width (max-height): maximum width and maximum height

@ Media (max-width: 600px ){
Match devices whose UI width is less than 600px
}
Min-width (min-height): Minimum width and height
@ Media (min-width: 400px ){
Match devices with a page width greater than PX
}
Max-device-width (max-device-height) maximum width and height of a device
@ Media (max-device-width: 800px ){
Devices with a matching width less than 800px (not on the Interface)
}
Min-device-width (min-device-height): the maximum width and height of the device.
@ Media (min-device-width: 600px ){
Devices with a matching width greater than 600px (not on the Interface)
}
Orientation: portrait Screen
<Link rel = "stylesheet" media = "all and
(Orientation: portrait )"
Href = "indexa.css"/>
Result: The format is displayed on the portrait screen.
Orientation: landscape screen of landscape
<Link rel = "stylesheet" media = "all and
(Orientation: landscape )"
Href = "indexa.css"/>
Result: The format is displayed on the horizontal screen.