vw/vh

是相对单位

• vw：viewport width
  • 1vw = 1/100视口宽度
• vh：viewport height
  • 1vh = 1/100视口高度

vw单位尺寸

1.确定设计稿对应的vw尺寸 （1/100视口宽度）

• 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）

2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh单位尺寸

1. 确定设计稿对应的vh尺寸（1/100视口高度）
   • 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）
2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

vw与vh不能混用。因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

例子

vw

HTML文件：

!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>
    vw适配/title>
    
    link rel="stylesheet" href="./demo.css">
    
/head>
    
body>
    
    div class="box">
    /div>
    
/body>
    
/html>

Less文件：

// out: ./demo.css

* {
    
    margin: 0;
    
    padding: 0;

}

/* 写一个68×29的盒子.设计稿宽度为 375
 1 vw = 3.75px */

.box {
    
    width: (68 / 3.75vw);
    
    height: (29 / 3.75vw);
    
    background-color:red;

}
    

vh

HTML文件：

!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>
    vh/title>
    
    link rel="stylesheet" href="./demo.css">
    
/head>
    
body>
    
    div class="box">
    /div>
    
/body>
    
/html>

Less文件：

// out: ./demo.css
* {
    
    margin: 0;
    
    padding: 0;

}


/* 写一个68×29的盒子.设计稿高度为 667
 1 vh = 6.67px */
 .box {
    
     width: (68 / 6.67vh);
    
     height: (29 / 6.67vh);
    
     background-color: #246;

 }
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！