In order to allow the code to be displayed on different web pages, and to give users a good experience. Generally use responsive layout technology. It can automatically adjust the content according to the size of the device. The responsive layout includes the following:
1. Media inquiries:
Different CSS codes can be validated through media queries.
@media screen and (-webkit-min-device-pixel-ratio: 1) {} /*设备像素比*/Media queries can display pictures of different sizes based on the device pixel ratio.
2. Use absolute length unit for width and height:
In the responsive layout, try to use percentages or relative length units for width and height. Generally use vw, vh
vw (viewport width): Calculated based on the width of the window, 1vw is equal to one hundredth of the width of the window. Width/total screen width*100vw
vh (viewport height): Calculated based on the height of the window, 1vh is equal to one hundredth of the height of the window.
WeChat applet uses rpx.
$screenWidth: 375;
@function px2vw($px) {
@return $px / $screenWidth * 100vw;
}3. The font uses relative length units:
The font responsive layout uses relative length units: such as rem
em: The size of em relative to the parent element. If the parent element is not defined, the font size of its ancestor element will be found upwards. The default size of the browser html is 16px
rem: relative to the size of font-size in html. The default size of the browser html is 16px.
WeChat applet uses rpx.
html {
font-size: 16px;
}
/* 设置span标签字体大小为24px */
span { font-size: 1.5rem; }4. Flexible layout:
In terms of page layout, flexible layout is generally used. Flexible layout is inherently responsive. display: flex; Turn on flexible layout.
5.float:
Float + div can also achieve some responsive layouts.
6. Grid system:
Bootstrap has a built-in responsive, mobile device-first streaming grid system. As the screen device or viewport size increases, the system will automatically be divided into up to 12 columns.
The advantage of the responsive layout is that the control of the style can be very fine. The disadvantage is that the styles for controlling the layout of different devices are written together, which is not convenient for development and modification.