CSS学习笔记：vw、vh实现移动端适配

移动端适配

移动端即手机端，也称M端

移动端适配：同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应，也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放

之前我在一篇博客中介绍了rem实现移动端适配，详情见博客：CSS学习笔记：rem实现移动端适配的原理——媒体查询-CSDN博客

但现在，企业中最常用的实现移动端适配的方案是vw、vh，而不是rem 

vw、vh

可以将vw和vh通俗地理解成另一种形式的百分比，只不过这种百分比不是相对于父元素的尺寸，而是相对于视口，即10vw是视口宽度的10%，10vh是视口高度的10%

 

将设计稿的px单位转化为vw或vh单位

 

例如设计稿中某个元素的宽度时68px，设计稿的参考设备宽度是375px，那么元素宽度转化为vw为：N = 68 / 3.75 

思考：开发中，vw和vh会混用吗？

在实际开发中，vw和vh会混用吗？也就是会不会存在一种情况：一个盒子的宽用的是vw，高用的是vh？

答案是不会

因为不同屏幕尺寸的手机宽高比不一定相等，比如全面屏视口高度尺寸大，如果混用可能会导致盒子变形

救命，现在回想起来，在写这篇博客之前，我做的所有项目都是vw和vh混用……