Recently, the company's projects need to be displayed on one screen, and no scroll bars can appear, at least no scroll bars can appear when the page is opened, which requires the page to be adaptive, and not only the page layout needs to be adaptively adjusted, pictures And the font also needs to be adaptive. Now my implementation plan is to remove all px and replace it with vw, wh, vmin(vm).
First of all, use percentage layout in layout, try not to use specific size, such as: px, cm
vw, wh, vmin(vm) are the units of the viewport. The specific conversion units are:
1vw = 1/100 viewport width
1vh = 1/100 viewport height
1vmin(vm) = 1/100 the smaller of the viewport height and width
E.g:
h1 {
font-size: 8vm; //for IE
font-size: 8vmin; //Other browsers
}
If the width of the viewport is 300mm and the height is 200mm, then the font size of the h1 element in the above code will be 16mm, that is (8x200)/100, because the height is smaller than the width, so the calculation is relative to the height.