纯CSS使用vw和vh视口单位实现自适应

编者注：在移动端中利用rem的相对于根HTML进行改变，经过一段时间JS实现了移动端自适应，本文则使用纯CSS视口单位来自行自适应，虽然如今的兼容性还无法彻底可以接受，但不妨碍你认识这个vw和vh的强大。

响应式布局的实现依靠媒体查询（Media Queries）来实现，选取主流设备宽度尺寸做为断点针对性写额外的样式进行适配，但这样作会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。

即便是经过rem单位来实现适配，也是须要内嵌一段脚本去动态计算根元素大小。

近年来，随着移动端对视口单位的支持愈来愈成熟、普遍，使得咱们能够尝试一种新的办法去真正地适配全部设备尺寸。

认识视图单位（Viewport units）

首先，咱们要了解什么是视口。

在业界，极为推崇的一种理论是Peter-Paul Koch（江湖人称"PPK大神"）提出的关于视口的解释---在桌面端，视口指的是在桌面端浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口，分别是：Layout Viewport（布局视口）、Visual Viewport（视觉视口）、Ideal Viewport

而视口单位中的 "视口"，在桌面端，毫无疑问指的就是浏览器的可视区域；可是在移动端，它指的则是三个Viewport中的Layout Viewport。

根据css规范，视口单位主要包括如下4个：

• vw：1vw等于视口宽度的1%
• vh：1vh等于视口高度的1%
• vmin：选取vw和vh中最小的那个
• vmax：选取vw和vh中最大的那个

视口单位区别于%单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；而%单位则是依赖于元素的祖先元素。

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏状况，右侧为横屏状况）

例如，在桌面端浏览器视口尺寸为650px，那么1vw = 650 * 1% = 6.5px（这是理论推算得出，若是浏览器不支持0.5px，那么实际渲染结果多是7px）。

兼容性

其兼容性以下图有所示，能够知道：在移动端ios8以上以及Android 4.4以上得到支持，而且在微信 x5 内核中也获得完美的全面支持

截图来自 Can I Use

利用视口单位适配页面

对于移动端开发来讲，最为重要的一点是如何适配页面，实现多终端的兼容，在不一样的适配方式各有千秋，也各有缺点。

就主流的响应式布局、弹性布局来讲，经过Media Queries 实现的布局须要配置多个响应断点，并且带来的体验也对用户十分不友好：布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的变化，如同卡带的唱机般“咔咔咔”地一下又一下。

而经过采用rem单位的动态计算的弹性布局，则是须要在头部内嵌一段脚原本进行监听分辨率的变化来动态改变根元素字体大小，使得CSS与js耦合在了一块儿。

有没有办法可以解决这样的问题呢？

答案是确定的，经过利用视口单位实现适配的页面，是技能解决响应式断层问题，又能解决脚本以来的问题的。

作法一： 仅使用vw做为css单位

在仅使用vw做为单位做为惟一一种CSS单位的作法下，咱们遵照：

1. 对于设计稿的尺寸转换成vw单位，咱们使用Sass函数编译

// iPhone 6 尺寸做为设计稿基准
$vw_base: 375px;
@function vw($px) {
    @return ($px / $vw_base) * 100vw;
}
复制代码

2. 不管是文本仍是布局宽度、间距等都使用vw做为CSS单位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vw(15) vw(10) vw(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vw(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vw(40); // 宽度
                height: vw(40); //高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}
复制代码

3. 1px物理像素线（也就是普通屏幕下1px，高清屏幕下0.5px的状况）采用transform 属性 scale 实现。

.mod_grid {
    position: relative;
    &::after {
        // 实现1px的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and ()
    }
}
复制代码

4. 对于须要保持高宽比的图，应改用padding-top实现

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
    }
}
复制代码

由此，咱们可以实现一个常见布局的页面效果以下：

体验地址点击此处

作法二：搭配vw和rem，布局更优化

这样的页面虽然看起来适配得很好，可是你会发现因为它是利用视口单位实现布局，依赖于视口大小而自动缩放，不管视口过大仍是太小，他也随着视口过大或者太小，失去了最大最小宽度的限制。

固然，你能够不在意这样微小的不友好用户体验，但咱们仍是尝试下追求修复这样的小瑕疵吧。

因而，联想到不如结合rem单位来实现布局？rem弹性布局的核心在于动态改变根元素大小，那么咱们能够经过：

1. 给根元素大小设置随着视口变化而变化的vw单位，这样就能够实现动态改变其大小。
2. 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

这样咱们就可以实现对布局宽度的最大最小限制。所以，根据以上条件，咱们能够得出代码实现以下：

// rem 单位换算： 定位75px 只是方便运算， 750-75px、 640-64px、 1080-108px， 如此类推
$vw_fontsize: 75; // iPhone6 尺寸的根元素大于基准值
@function rem($px) {
    @return ($px / $vm_fontsize) * 1rem;
}
// 根元素大小使用vw单位
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    // 同时，经过Media Queries 限制根元素最大值，最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width:540px) {
        font-size: 108px;
    }
}

// body 也增长最大最小宽度限制，避免默认100%宽度的block元素跟随body而过大太小
body {
    max-width: 540px;
    min-width: 320px;
}
复制代码

这里就再也不给出截图，但能够点击此处在线地址进行体验。

小结

相对于作法一，我的比较推崇作法二，有如下两点缘由：

第一，作法二相对来讲用户视觉体验更好，增长了最大最小宽度的限制；

第二，更重要是，若是选择主流的rem弹性布局方式做为项目开发的适配页面方法，那么作法二更适合于后期项目从rem单位过渡到vw单位。只须要经过改变根元素大小的计算方式，你就能够不须要其余任何的处理，就无缝过渡到另外一种CSS单位，更况且vw单位的使用必然会成为一种更好的适配方式，目前它只是碍于兼容性的支持而得不到普遍的应用。

后语

这是笔者在偶然中阅读到[翻译]使用VH和VW实现真正的流体排版这一篇文章获得的感悟与成果，也满心欢喜地期待这篇文章一样可以带给读者一些启发，并提出一些vw单位的使用秘笈来就留交流~:)

此文为转载。原文： 凹凸实验室 aotu.io/notes/2017/…