vw+rem移动端自适应布局

rem布局过程中依赖于根元素的font-size属性，而如果设置一个固定的font-size，再使用rem来布局，会导致小屏手机视觉上觉得网页被放大，而大屏手机上则显得网页布局稀疏。

所以咱们需要根据收据的屏幕大小等比的设置font-size，从而实现大小屏手机视觉一致的效果。实现这个功能可以使用js在页面载入时，读取屏幕宽度，再根据设计图标准宽度做一些转换。

而使用vw天然就是一个根据屏幕宽度来做计算的长度单位，完美实现以上js计算功能。同时在移动端，vw的兼容性还不错，完全可以直接使用。

计算方法：

// 设计图标准根元素字体 / 设计图标准宽度 * 100
const vw = 16 / 750 * 100

例如，设计图以6s为标准，2倍尺寸，宽度750px，而你设置根元素字体大小为16px，那么计算出的vw就是2.13333vw，直接在css中设置：

html {
font-size: 2.13333vw;
}

这个时候，我们在标准宽度下根元素实际字体大小是16px，如果到5s手机上面，则根元素实际字体大小为13.653px。根元素的字体大小变了，页面中使用rem来设置的边距、长度、字体大小都会发现改变，页面看起来像是缩小了一点点，但是所有的布局跟6s都是一样的。

6s显示效果：

5s显示效果：

可以看到效果是一致的，换行、截断都显示一致，视觉效果也是一致的。

横屏显示

我们日常使用中，手机都是竖屏显示的，但是也会有横屏显示的时候。如果横屏显示，那么手机的宽度就变成了长度，长度就变成了宽度了，这个时候vw就显示的不对了。看下图，虽然显示没有乱，但是字变的很大了，复杂情况下布局估计也乱了。

还好有应对方法：vmin，这个属性表示视口宽度中最小的那个，竖屏下是vw，横屏下是vh。设置了vim之后显示效果就不错了。

自动转换rem

设计图的设计尺寸一般都是2倍或者3倍，如果此时咱们自己转换成一倍的再去根据根元素计算rem那也太累了。

比如2倍设计图上面的56px，那么咱们需要：56 / 2 / 16，心态崩溃~~~

算是不可能自己算的，找插件呗，这个轮子早就被造好了，postcss-pxtorem就是专门来干这个事情的，配置好设计尺寸，设计倍数，然后css里面直接写56px，插件会自己给你计算成 (56 / 2 / 16)px，是不是很棒。

加载配置一个插件也挺麻烦的，如果你刚好在sass之类的css预处理器，完全可以使用sass function来自动计算。

$rootSize: 16px!default;
$designWidth: 750px!default;
$designRatio: 2!default;

@function rem($px) {
@return $px / $rootSize / $designRatio * 1rem;
}
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

5fb2e6d5442144c863cbcff965.png)