前言
前面我们分享 移动Web开发基础-rem布局 的时候提到了两个方案。方案的最终目的都是为了形成一个“流单位”。
方案一是通过媒体查询给html
设置font-size
,密集的断点设置形成“流单位”。
方案二是通过JS脚本根据设备显示屏大小动态计算出根元素字体大小,这个计算结果几乎是连续的“流单位”。
两个方案的对比,我们常用的当然也是建议的方案是第二个。
目前来看,方案二存在一个问题是JS和HTML没有得到解耦,这里有一个视口单位VW天生就是“流单位”。
如果对视口相关知识点不熟悉的话可以阅读 移动Web开发基础-Viewport。
认识视口单位
根据CSS3规范,视口单位主要包括以下4个:
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
视口单位区别于%单位,视口单位是依赖于视口的尺寸,根据视口尺寸的百分比来定义的;而%单位则是依赖于元素的祖先元素。
兼容性
目前常用的浏览器版本都是兼容该单位的,正说明我们可以开始使用视口单位来实现适配布局了。
使用VW布局页面
(以下都以iPhone 6的尺寸为例)
方案一:
最简单的方案就是所有的布局元素及属性都用VW来做单位,对应关系是:
设计稿 750px——>100vw
那我们书写时计算:(x/750)*100vw
sass:
$vw_base: 750;
@function vw($px) {
@retur