移动端布局方案——vw+rem

　　前言

　　　　首先你要知道 vw 和 rem 是什么？怎么使用？

　　　　①：简单来说 vw 是视口单位，相当于把视口等分成了100，1vw = 1;

　　　　②：rem是相对单位，设置根元素 html 的 font-size，比如给 html 设置字体大小为100px，1rem = 100px;

　　　　注：我之前针对 vw 和 rem 分别写过一篇博客，详见如下

　　　　　　vw：https://www.cnblogs.com/tu-0718/p/9906692.html

　　　　　　rem：https://www.cnblogs.com/tu-0718/p/9146631.html

　　正文

　　　还记得第一次知道 rem 时，我的心情如沐春风，感觉找到了新大陆

　　　那时常为移动端写自适应页面而苦恼，传统的百分比布局（流式布局）和媒体查询早已让我心力交瘁

　　　 百分比布局的缺点：宽度虽然能随屏幕自适应，但高度固定不变，当设备屏幕越来越大，会有一种被强行拉伸的既视感，用户体验差

　　　 媒体查询的缺点：CSS 代码量增多，体积增大，要为每一个不同分辨率的设备单独写一套样式来自适应，这样的话我宁愿狗带

　　　　在这种情况下，rem 的出现无异于黑暗中的一道曙光，不过它也有一个缺点

　　　 rem的缺点：需要引入一段JS代码，这样违背了样式行为分离的思想，而且耦合深，无法解耦

　　　不过，对于很多人来说这并不是问题，毕竟引入一段 JS 代码能省去那么多麻烦，何乐而为呢？

　　　如果你对 rem 的这个缺点无法忍受或追求更好的解决方案，那么 vw 无疑会是你的另一道曙光

　　　使用 vw，不需要引入 JS 代码就能达到比 rem 更好的效果，并且相对于视口，所以在宽屏上也能很好的显示

　　　 vw的缺点：vw 虽然好用，但却有一个蛋疼的地方，因为相对于视口，所以失去了最大宽度/高度的限制，

　　　　　　　　可能你在宽屏上看到完美，竖屏上就不忍直视了。这时需要你额外为元素添加最大宽度/高度来限制

　　　说了这么多，难道就没有一种方法能够让我们真正身心愉悦的写移动端的页面了吗？答案是肯定的！！！

　　　但俗话说得好，三个臭皮匠，顶个诸葛亮。既然单独一种方法不行，我们就打配合嘛，这样 vw + rem 的方式就应运而生了

　　　①：我们以 iPhone6为基准，屏幕宽度为375px，然后换算成 vw

　　　　　1vw = 3.75px;

　　　　注：上面的 3.75 是用 375 / 100 得来的（上面也提到过，vw 是视口单位，被均分成了100，1vw = 1）

　　　②：一般使用 rem 会给 html 的 font-size 设置大小为 100px，因为方便计算，这里需要把100px 换算为 vw

　　　　100px = 27vw；

　　　 注：上面的结果是用 100 / 3.75 且四舍五入得来的，因为结果除不尽为无限循环

　　　原文参考：http://www.cnblogs.com/xwkj/p/10308082.html

　　　Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
        html {
            font-size: 27vw;
        }
        div {
            margin: 0.2rem auto;
            width: 3rem;
            height: 0.3rem;
            line-height: 0.3rem;
            font-size: 0.16rem;
            text-align: center;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>我是第一</div>
    <div>我是第二</div>
    <div>我是第三</div>
</body>
</html>

　　　　注：上面div的 font-size 我用的 rem，而没用px，主要想让demo效果更明显。

　　　　　　在实际项目中，有时可能想让字体不因为屏幕变大而变大，这时可根据项目选择为 font-size 设置rem还是px

移动端布局方案——vw+rem

猜你喜欢