Review of using css3 responsive layout design

Responsive design means that the display style will be different with different resolutions on different devices.
　media Attribute is used to specify different styles for different media types. Re-render the page regardless of the browser's width and height.
Syntax: @media mediatype and | not | only (media feature) {}
Example:
max-width : 600px)" href="small.css"/>
　 Result: When the resolution is increased to 600, the styles in this style sheet will be displayed.

Media type:

all for all devices

print for printers and printing devices

screen for computer screens , tablet, smartphone.

Speech is used for readers and other sound-producing devices.

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

institutional media type.

　　　@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 paragraph is only for color Screen device*/
　　}

Media characteristics: (commonly used)　　
　　max-width(max-height): Maximum width and maximum height
　　　@media (max-width: 600px) {
　　　 Match devices with interface width less than 600px

　　　}

　　min-width(

min-height

): minimum width and height　　　@media (min-width : 400px) { 　　　 Match devices with interface width greater than 400px

　　　}

　 max-device-width(max-device-height) Maximum width and height of the device
@media (max-device-width: 800px) {
Matching devices (not interfaces) with a width less than 800px
} min-device-width(min-device-height): The maximum width of the device and height　　　 @media (min-device-width: 600px) {
　　　 Match devices (not interfaces) with a width greater than 600px
　　　}
　　 Orientation: portrait Vertical screen
　　　　　　 href="indexa.css"/>
　　 Result: Display this style
　　　orientation:landscape horizontal Screen
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ductgit=’ Mode

The above is the detailed content of Review of using css3 responsive layout design. For more information, please follow other related articles on the PHP Chinese website!