vw 和 rem 做移动端适配

最新推荐文章于 2024-03-13 14:35:41 发布

不再重要

最新推荐文章于 2024-03-13 14:35:41 发布

阅读量241

点赞数

分类专栏： vue React

本文链接：https://blog.csdn.net/weixin_42046201/article/details/104521488

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

React

11 篇文章 0 订阅

订阅专栏

// 设计稿宽度, 75
var designWith = 750

// 设计稿上1px对应设备上多少个单位的vw, 100vw表示设备屏幕宽度
var vw = 100 / designWith

// 此时的vw大小时html的font-size的大小
// 同时rem单位时根据vw大大小进行计算的
// 为了方便后面的尺寸计算,放大100倍,即设计稿上的100px;


var fontSize = 100 * vw


html{
  font-size: 13.33333333vw;
}
.box{
  width: 2rem;
  height: 2rem;
  background: red;
}


通过设计稿的宽度计算出vw为 13.33333333
设置html根大小为  13.33333333
写样式时只需要 把设计稿宽度 除以100得到rem 换算比较简单