转载

基于vw等viewport视区相对单位的响应式排版和布局

这篇文章发布于 2016年08月8日，星期一，23:49，归类于css相关。阅读 55 次, 今日 55 次

byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5583

本文全文转载需购买版权(500¥)，摘要引流则免费，具体参见这里

一、什么是视区相对单位？

就是相对于浏览器viewport尺寸的单位，具体包括下面4个：

vw – 视区宽度百分值
vh – 视区高度百分值
vmin – vw或vh，取小的那个
vmax – vw或vh，取大的那个

至于更具体的内容，我就不展开了，因为我发现已经有一个很厉害的人对这些单位作为很详细的介绍了，是超详细，这个人超能写。而且一看发表日期，2012年9月，我勒个擦，这不是上届伦敦奥运会的时候嘛，足足有4年了呀，也太前沿了吧，那个时候的浏览器兼容性还只是这幅鸟样子：

基于vw等viewport视区相对单位的响应式排版和布局

好东西呢是要分享滴， 这篇文章就是 ：“ 视区相关单位vw, vh..简介以及可实际应用场景 ”，速速围观，就算不学知识，也看感受下这篇文章的气场。

大家有没有发现，……………………，这个很厉害的人原来就是我本人…… 基于vw等viewport视区相对单位的响应式排版和布局

基于vw等viewport视区相对单位的响应式排版和布局

4年时光，物是人非， vw 头上的草叶越来越绿了，现在的兼容性则是：

基于vw等viewport视区相对单位的响应式排版和布局

确实绿了很多，Android 4.4开始支持，前段时间给老爹买的华为机子默认都是5.*版本，看上去， vw 在移动端的春天要来哈~

CSS3中还有另外一个单位 rem ，估计有不少小伙伴耳闻或者用过，为何 rem 要比 vw 火呢，因为 rem 从Android 2.1版本就开始支持了，兼容性好。一旦兼容性不是问题， vw 也会火起来的，就跟薛之谦一样。

二、基于vw的响应式排版和布局

一般而言，屏幕越大，我们希望文字大小也越大，元素的尺寸也能等比例放大，尤其在现在的网页设计风格中。

如果要实现这种弹性自适应效果，目前主流的实现是通过设定根元素的 font-size 大小，具体元素或模块使用 rem 或 em 单位来实现。

一种是直接设定一个临界点字体大小，如：

html {
    font-size: 16px;
}
@media screen and (min-width: 600px) {
    html {
        font-size: 18px;
    }
}
@media screen and (min-width: 1000px) {
    html {
        font-size: 22px;
    }
}

还有一种就是使用JS在resize或者屏幕旋转的时候，动态修改root的 font-size 大小。

前面一种基于 @media 的CSS实现问题在于，内容的弹性自适应只会在临界点的时候，“Duang”变化下，于是，我们浏览器尺寸拉伸的时候，会感受到类似“噔噔噔”卡壳的效果，感觉就像是吃了含笑半步癫：

基于vw等viewport视区相对单位的响应式排版和布局

使用JS的问题在于他是JS，要保证加载体验，需要头部内联，为了保证实时性，需要多个浏览器变化事件监测，用我的口头禅讲就是“显得啰嗦”。

那有没有两全其美的方法呢？

有，那就是本文要隆重请出场的 vw ，配合CSS3 calc 计算实现动态字体大小效果。

例如，我们希望浏览器宽度在600px~1000px变化的时候，html根元素的 font-size 大小是18px~22px之间对应变化的，则可以：

html { font-size: calc(18px + 4 * (100vw - 600px) / 400); }

当视区宽度是 600px 的时候， 100vw 就等于 600px ，于是：

18px + 4 * (100vw - 600px) / 400
↓
18px + 4 * (600px - 600px) / 400
↓
18px

当视区宽度是 1000px 的时候， 100vw 就等于 1000px ，于是：

18px + 4 * (100vw - 600px) / 400
↓
18px + 4 * (1000px - 600px) / 400
↓
18px + 4px
↓
22px

于是，理论上，一个18px~22px字体大小动态匹配的布局基础就建好了。

一般出现“理论上”这三个字，就说明我要“放坑”了，大家闪开~~

此“坑”就是苹果系统的Safari浏览器不认识上面的属性值（如下截图）：

就Safari不行，window下的所有浏览器，包括IE，以及mac下的Chrome等浏览器都是可以正确解析的。

我这篇文章的前一篇文章“ Safari 3D transform变换z-index层级渲染异常的研究 ”就是吐槽“Safari是新时代的IE6”来着，没想到一日不见，这“新时代IE6”的名声是坐的越来越夯实了哈！基于vw等viewport视区相对单位的响应式排版和布局

好在，我们还是有办法曲线救国的。那就是，我们基础字体大小不使用像素单位，使用百分比单位即可，如下：

html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }

这个包括Safari在内的浏览器，都能够按照我们的预期计算 font-size 大小了，于是，我们一番倒腾，就有了如下的响应式设置：

html {
    /* iPhone6的375px尺寸作为16px基准，600px正好18px大小 */
    font-size: calc(100% + 2 * (100vw - 375px) / 225);
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
    }
}

有个动态的根字体大小，我们就可以使用 rem 或 em 这些相对单位，来让我们的页面排版和布局更富有弹性。

您可以狠狠地点击这里：基于vw的弹性布局小演示小demo

结果在大尺寸下：

小尺寸下：

对比会发现，文字的大小和图片的大小都明显不一样了，但是，最终给人的排版的感觉却没有什么不舒服的，因为，你仔细看，就会发现，虽然字号差别很大，但是文字的换行位置居然都是一模一样的，这活脱脱等比例缩放的即视感。你说，这么洒脱的效果，什么手机各种分辨率适配还是问题吗？是问题吗？

对吧，直接变成了毛毛雨，几行CSS，全部搞定！如果你足够懒，甚至可以本文的CSS代码直接copy到自己项目中用，注释都不需要改，也是可以的！

这么低的成本，这么好的体验，还不赶快在自己的项目里试试？基于vw等viewport视区相对单位的响应式排版和布局

三、结束语

对于大厂，Android4.4之前的版本，目前怕是还是要兼顾的，怎么办？我觉得没有必要为了一个老妪而放弃整个后宫，对于绝大部分设备，我们还是 vm + calc 哗啦啦地走起，老的设备，我们可以使用以前JS的策略，打个脚本补丁，估计十来行代码，效果都是一样的，CSS代码也完全复用，一点都没必要特异处理，因为老机子不认识 vw ，所以完全没必要担心新老冲突这样的问题。

当然，我自己目前也没在正式的to C项目中实践过，所以，或许还有其他坑什么的，Android设备那么多，谁知道哪个机子的浏览器突然就抽风了呢！

但是，这并不妨碍我大胆预测：再过1~2年，基于 vm 布局的各种文章、各种事件案例就会雨后春笋般出现……

好了，好像没有什么其他要说的了。

感谢阅读，欢迎交流！

基于vw等viewport视区相对单位的响应式排版和布局