本文介绍了vw作为前端移动端适配的一种方案，通过vw单位实现元素的等比缩放，无需JavaScript。阐述了vw的原理，即1vw等于屏幕宽度的1%，并提供了一个例子说明如何将设计稿尺寸转换为vw单位。同时，比较了vw方案与其他适配方案如viewport缩放和动态REM的优缺点。最后鼓励读者关注作者的原创文章和交流群。
1 前言
设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。
前面我们讲过两种等比缩放的方案：viewport缩放 和 动态REM，现在再讲另外一种不需要JavaScript的适配方案——vw适配方案。
2 原理
vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
举个例子。设计师交付的设计稿宽度是750px，设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100% = 4.27% ，换句话说这个标题的字号占屏幕宽度的占比是4.27%，不管任何屏幕都是如此。4.27% 即 4.27vw。
对于任何需要等比缩放的元素，在写CSS设置样式时直接换算成vw即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度。
3 适配代码
假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<s
最低0.47元/天 解锁文章
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
