Review of the use of CSS3 responsive layout design

Responsive design is a different type of resolution displayed under different devices.
The media property is used to specify different styles for different media types. Re-render the page with the browser's width and height eradicated.
Syntax: @media mediatype and | Not | Only (Media feature) {}
Example:
<link rel= "stylesheet" media= "screen and (max-width:600px)" href= "Small.css"/>
Result: Display the style in this style sheet when the resolution is as large as 600.

Media Type:

All for all devices

Print for printers and printing devices

Screen for computer screens, tablets, smartphones.

Speech for audible devices such as readers

Key words:

The AND operator is used to match both rules on both sides of the symbol.

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

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

Media features: (common)

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

@media (max-width:600px) {
Matches devices with an interface width less than 600px
}
Min-width (min-height): Minimum width and height
@media (min-width:400px) {
The maximum width of a device that matches an interface width greater than 400px
}
Max-device-width (max-device-height) device and height
@media (max-device-width:800px) {
Match device (not interface) width less than 800px device
}
Min-device-width (min-　　　　Device-height): Maximum width and height of the device
@media (min-device-width:600px) {
Match device (not interface) device with width greater than 600px
}
　　　　　　orientation:portrait vertical screen
<link rel= "stylesheet" media= "All and
(orientation:portrait)"
href= "Indexa.css"/>
Result: This type is displayed in the vertical screen
Orientation:landscape horizontal
<link rel= "stylesheet" media= "all and
(orientation:landscape) "
href=" Indexa.css "/>
Result: This type is displayed on a horizontal screen