Compatibility between PC and mobile
responsive layout
The same page has different layouts under different screen sizes, realizing different display methods for browsing web pages on terminals with different screen resolutions.
1. Set meta tags
For example:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
The viewport is the size of the visible area of the webpage. When setting the viewport, you only need to set the width, and don’t care about the height. The specific height is automatically expanded by the content of the webpage. The meaning of the content in the meta tag above is as follows:
viewport: the viewport, which represents the visible area of the web page;
width: controls the size of the viewport, you can specify a specific value, such as 600, or a special value composed of keywords, such as device-width represents the width of the device; initial-scale: represents the initial zoom ratio, that is, the zoom ratio when the page is first loaded; maximum-scale: represents the maximum ratio that allows users to zoom, ranging from 0 to 10.0; Scale, ranging from 0 to 10.0; user-scalable: Indicates whether the user can manually scale, "yes" means to allow scaling, "no" means
to
prohibit
scaling
.
2. Media query
According to the specified conditions, define different CSS styles for different media types (screen print), so that users using different devices can get the best experience.
@media (min-width: 321px) and (max-width: 375px) {
/*宽度范围321~375 显示为红色*/
body {
background: red;
}
}
@media (min-width: 376px) and (max-width: 425px) {
/*宽度范围376~425 显示为黄色*/
body {
background: yellow;
}
}
Flex layout
Flexible layout, very simple, flexible and complete. Please refer to Ruan Yifeng's log for details .
fluid layout
Use percentage, em, rem to set the element, and you can also use the calculation function calc().
The difference between the unit em and rem
The em in the font size of the em
child element refers to the percentage relative to the font size of the parent element.
The element width/height/padding/margin attributes use em, which refers to the percentage relative to its own font size.
rem
No matter what element, rem refers to the percentage relative to the font size of the root element, and the general root element is .