目录
目录
移动端适配vw方案
设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。
前面我们讲过两种等比缩放的方案：viewport缩放 和 动态REM，现在再讲另外一种不需要JavaScript的适配方案——vw适配方案。
vw是相对单位，1vw表示屏幕宽度的1\%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
举个例子。设计师交付的设计稿宽度是750px，设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100\% = 4.27\% ，换句话说这个标题的字号占屏幕宽度的占比是4.27\%，不管任何屏幕都是如此。4.27\% 即 4.27vw。
对于任何需要等比缩放的元素，在写CSS设置样式时直接换算成vw即可，尺寸 = 100vw*设计稿标注大小/设计稿宽度。
假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
width: 16vw; /* 100vw*120/750 */
font-size: 3.73vw; /* 100vw*28/750 */
line-height: 6.4vw; /* 100vw*48/750 */
border: 1px solid #000; /*不需要缩放的部分用px*/
text-align: center;
}
</style>
</head>
<body>
<div class="button">按钮</div>
</body>
</html>
在写样式时会发现，虽然不用写JS做适配，但标注尺寸换算为vw又麻烦又不直观。
我们可以在CSS里使用calc来换算换，只不过需要注意新语法的兼容性。
:root { --ratio: calc(100vw/750); } .button { font-size: calc(100vw*28/750); /* 可以直接用calc */ line-height: calc(100vw*48/750); width: calc(120*var(--ratio)); /* 也可以用calc配合var使用，IE不支持var */ border: 1px solid #000; /*不需要缩放的部分用px*/ text-align: center; }
在正式的项目里，我们也可以用SCSS，把换算交给预处理器
@function px2vw($px) { @return $px * 100vw / 750; } .button { width: px2vw(120); font-size: px2vw(28); line-height: px2vw(48); border: 1px solid #000; text-align: center; }
viewport缩放方案
- 适配原理简单
- 需要使用JS
- 直接使用设计稿标注无需换算
- 方案死板只能实现页面级别整体缩放
动态REM方案
- 适配原理稍复杂
- 需要使用JS
- 设计稿标注的px换算到CSS的rem计算简单
- 方案灵活技能实现整体缩放又能实现局部不缩放
vw方案
- 适配原理简单
- 不需要JS即可适配
- 设计稿标注的px换算到CSS的vw计算复杂
- 方案灵活技能实现整体缩放又能实现局部不缩放
饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com
