移动端适配 vw vh

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

适配方案

rem 适配代码：

<script>
    var html = document.documentElement;
    var widths = html.clientWidth;
    var num = 10;
    html.style.fontSize = widths / num + 'px';
</script>
复制代码

但是呢，并不是所有人都会写JS的，有没有什么方案，我们可以不写JS呢？还是真的有，我们来看下。

新的单位：`vw`、`vh`

兼容：IE9及以上，IOS 6.1+ ，安卓4.4+

这两个单位都是根据视口屏幕来进行计算的，所以PC的时候，要注意滚动条哦~

我们来看下，下面的图：

注意哦：不管设备是横屏还是竖屏，vw指的都是水平方向的，vh指的都是垂直方向的

它和百分比不一样，不会受到父级宽度的影响，这样我们通过css就可以获取到当前的视口宽度了，利用获取到的视口宽度 / 100vw

html{
    font-size: 10vw;
}
/* 因为整个屏幕是 100vw ，这里我们分成 10 个格子，一个格子是 10vw 的 font-size */
复制代码

这样的话，因为屏幕的宽度发生变化，html 上的font-size也会动态发生变化。

div{
    width:5rem;
    height:5rem;
}
复制代码

以上和我们原来写JS达到的效果是一样的，当然我们也可以直接用vw的单位，例如：

div{
    width:50vw;
    height:50vw;
}
复制代码

除了上面说到的 vw 和 vh以外，还有 vmin和 vmax

vmin：选取 vw和vh 中较小的

vmax：选取 vw和 vh 中较大的

当然，这个方案也不是十全十美的，因为在计算的过程中也会出现小数点

现在的我们根本没法填的坑

移动端输入框被键盘遮挡
点击穿透的问题
滑动冲突（轮播图和滚动条）
内容禁止缩放无效

移动端好用的插件

better-scroll（js）
animate.css 动画库
swiper 滑屏工具

lib-flexible

一个用于做rem适配的工具，里面的代码，其实和我们写的rem适配是一致的

下载地址：github.com/amfe/lib-fl…

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

面试相关推荐

更多精彩详见：个人主页