VW,VH are all units relative to the screen viewport.
VW: The width relative to the viewport. The viewport is divided into 100 units of VW;
VH: The height relative to the viewport. The viewport is divided into 100 units of VH;
Vmax: The larger of the width or height relative to the viewport. One of the largest is the Vmax, which is divided into 100 units;
Vmin: The smaller one relative to the width or height of the viewport. The smallest of them is divided into 100 units of vmin;
After explaining the relevant concepts, the following is the specific adaptation program:
The general UI gives design drafts that are 750x1334, so you can use sass to write a function:
1 $containerWidth: 750;2 $containerHeight: 1334;
3 @function Viex ($px) {4 @return $px *100/$containerWidth * 1vw;5}
6 @function Viey ($px) {7 @return $px *100/$containerHeight * 1vh;8}
function set, down is simple, in the Web page layout, CSS size settings, the design of the number of drafts, here is how much, such as:
1. Header {2 position:relative;3 Width:viex (4 height:viey); 5 Background-image:url (.. /assets/self/1126215672.jpg); 6 Background-size:viex (Viey); 7 position:relative;8}
Then open the browser to see, find the layout size, whether on the phone or tablet is suitable.
Still using REM as a mobile-fit? Latest Mobile Adaptation Solutions VW,VH Learn!