Still using REM as a mobile-fit? Latest Mobile Adaptation Solutions VW,VH Learn!

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!