vw and vh mobile layout

VX and VH

insert image description here
insert image description here
The rem market is more common
1. It is necessary to constantly modify the html text size, media query media, flexible.js
insert image description here
viewport width
viewport height
1 vw=1/100 viewport width
1vh=1/100 viewport height
vw and vh are based on the current viewport
insert image description here
insert image description here

The width and height are proportional changes.
insert image description here
The target type of our element is 50*50px
50/3.75=13.333www

P533-06-Quiz

The 50*50 box is converted into a vw
ip6 viewport of 375px;
div{ width: 50px/3.75; ip6 viewport 375px1vw=3.75; When using vw in development, what changes need to be made in pixels? Change the mode to 2x mode 2. How to restore the design draft using vw during development? Determine the viewport width of the design draft, such as 375, directly use the measured value images/less/fonts iconfont.css Click the following to open the file Right click Open in new Tab .


insert image description here





insert image description here
insert image description here



insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/weixin_43428283/article/details/123602217