当前位置：网站首页>Mobile adaptation: vw/vh

Mobile adaptation: vw/vh

2022-07-04 06:41:00 【HHppGo】

`vw/vh`

The goal is ： Able to use `vw Company` Set the of web page elements `Size`

Relative units
relative The size of the viewport The result of the calculation is

vw：viewport width
– 1vw = 1/100 Viewport width
vh：viewport height
– 1vh = 1/100 Viewport height

Code ：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Experience vw and vh</title>
	<style> * {
       margin: 0; padding: 0; } /*  demand ： Separate use vw and vh Set the box size  vw:  Refer to the calculation results of viewport width ,1/100 vh:  Reference viewport height calculation results ,1/100 */ .box {
       width: 50vw; height: 30vw; background-color: pink; } /* .box { width: 50vh; height: 30vh; background-color: pink; } */ </style>
</head>

<body>
	<div class="box"></div>
</body>

</html>

Please add a picture description
Insert picture description here

`vw` Adaptation principle

The goal is ： Realize in `Different widths` Of the devices , Page element size `Scale proportionally` effect

vw Unit size

Determine the design draft Corresponding Of vw Size （1/100 Viewport width ）
– see Design width -> Determine reference Device width ( Viewport width ）-> determine vw Size （1/100 Viewport width ）
vw Unit size = px Unit value / ( 1/100 Viewport width )

`vh` Adaptation principle

vh Unit size

Determine the design draft Corresponding Of vh Size （1/100 Viewport height ）
– see Design width -> Determine reference Equipment height ( Viewport height ）-> determine vh Size （1/100 Viewport height ）
vh Unit size = px Unit value / ( 1/100 Viewport height )

less Code ：

// out: ./ * {
    
	margin: 0;
	padding: 0;
}


//  demand ： Separate use vw and vh Set up  68px * 29px The size of your box  //  The design is viewport width 375px, Viewport height 667px Of  // .box {
    
// 	width: (68/3.75vw);;
//     height: (29/3.75vw);;
// 	background-color: pink;
// }


.box {
    
	width: (68/6.67vh);;
    height: (29/6.67vh);;
	background-color: green;
}


//  Tips ： Choose one of the above two , But at work , Usually use vw, Reference equipment width

vw and vh The mix of ( `Can't` )

// out: ./ * {
    
	margin: 0;
	padding: 0;
}

//  test ：vw and vh A mixture of , Set up 68px * 29px Box （ The design draft is  375px Of ） //  Design draft  375px * 667px //  Tips ： In the work ,vw and vh Don't mix , Because when you encounter a full screen, the size of the box will be different from the design  .box {
    
	width: (68/3.75vw);
	
	height: (29/6.67vh);
	background-color: blue;
}