移动端rem布局的学习（基于本身写的一个网易云播放页面的思考）

时间 2019-11-21

标签移动 rem 布局学习基于本身写的一个网易播放页面思考栏目无线繁體版

原文原文链接

对于一个前端的初学者来讲，首先要作好的事就是切页面了，切页面不得不说的就是布局了，布局的重要性不言而喻，为了良好的用户体验，提出了许多不同的布局：响应式布局，弹性布局，流动布局等等，也流入出了许多的框架。最近在看关于移动端的响应式布局，其中涉及到比较多的就是大小属性的设置：px、vw、vh、%、em、rem等等，今天本身就捋一捋rem的用法。 javascript

说在前面

一想到写移动端的页面，就要考虑本身写的页面可以适应各类不一样的移动设备，起初想一想要作到感受好难啊，最初想到的就是用第三方的框架，用别人写的东西应该会很方便。然而万一不能用该怎么办啊，因此仍是要学会本身写原生的页面布局，也就会有今天的这篇文章了。先看看本身用普通百分比、像素来写的页面和后来改用rem写的页面的对比： css

普通百分百布局与rem布局的比较

小分辨率（375*667）
小分辨率（414*736）
大分辨率

简单的对比下就看出了效果。当不用别人的框架，该怎么去写。最容易想到的就是用百分比来写，这种写法对设备的宽度有用，宽度是固定的，对高度不起什么做用，大部分人的作法就是宽度用百分来设置，高度用px来设置，但这种的作法体验并非很好，用分辨率小的设备感受不是不好，一旦换成了分辨率比较大的设备效果就差不少了，大部分的标签元素都会被拉伸。高度固定，换成了大的分辨率各类元素效果仍是原来的，各类元素固定了大小，体验并非很好。 html

rem的使用

rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，经过根元素进行适配的。前端

普通使用

大部分是经过设置html的字体大小就能够控制rem的大小，例如：html的字体大小为20px，那么就说20px为1rem，接下来的全部元素的大小都基于这个比例来换算。这种的算法是存在问题的，当咱们计算页面的宽度rem值得时候都是使用某一款移动设备的分辨率来计算的，下面的例子我用的是iphone6的分辨率375*667，它的宽度为375px，20px为1rem，那么375px就是18.75rem。看下面的代码： java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <!--<script type="text/javascript" src="js/rem.js" ></script>-->
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 18.75rem;
                height: 7.5rem;
                float: left;
                background-color: red;
            
            }
            #box2{
                width: 18.75rem;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 18.75rem;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 18.75rem;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 18.75rem;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>

复制代码

上面的代码在375*667的分辨率下恰好可以占满宽度，当你切换到其余的分辨率（如414*736）时问题就来了，看图： jquery

这个问题的缘由很简单，这种写法即便用的是rem也起不来做用，宽度和高度都是固定的，width为18.75rem就是375px，切换成其它分辨率（如414*736），它的宽度仍是375px，空白处仍是显示出来了，不少人会认为能够把宽度设置成百分比的形式，或者用媒介查询@media,或是viewport设置中的那个deviceWidth（）的方式来解决问题，固然这些方式均能解决宽度的问题，然而高度的问题又该怎么办呢？看下面： git

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <!--<script type="text/javascript" src="js/rem.js" ></script>-->
        <title></title>
        <style>
            html{
                font-size:20px;
            }
            *{
                border: 0;
                padding: 0;
                margin: 0;
            }
            #box1{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: red;
            
            }
            #box2{
                width: 100%;
                height: 7.5rem;
                float: left;
                background-color: #00FFFF;
                font-size: 0.6rem;
            }
            #box3{
                width: 100%;
                height: 17rem;
                float: left;
                background-color: #B22222;
            }
            #box4{
                width: 100%;
                height: 20rem;
                float: left;
                background-color: #BFBFBF;
            }
            #box5{
                width: 100%;
                height: 22rem;
                float: left;
                background-color: cadetblue;
            }
            #input1{
                width: 80%;
                height: 2rem;
                float: left;
                border-radius: 2rem;
                margin-left: 1.5rem;
                margin-top: 0.6rem;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <input type="text" id="input1" />
        </div>
        <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div>
        <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div>
        <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div>
        <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div>
    </body>
</html>
复制代码

看效果： github

看图就知道了，宽度能够适应不一样的移动设备，然而高度一直都没有发生变化，一直都是150px，页面效果并很差看，分辨率大了，页面被拉伸，高度显得变小了。算法

正确使用

动态计算html的font-size，核心是切换不一样移动设备经过js获取设备宽度，而后按比例计算html的font-size的值，动态变化。 bash

var d = document.documentElement;//获取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
复制代码

上述代码解释：

设计稿横向分辨率为375（iphone6），计划20px为1rem；
布局的时候，各元素的css尺寸= 20 * （设备宽度/设计稿竖向分辨率）。

完整代码：

window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), 
                        (function() {//判断是屏幕旋转仍是resize
    function c() {
        var d = document.documentElement;//获取html元素
        var cw = d.clientWidth || 750;
        d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
    }
    c();
    return c;
})(), false);
复制代码

上面的作法就能够动态的设置各类标签元素的宽和高，按比例的调试适应不一样的移动设备。例以下：上面的代码中是以iphone6为设计稿的，box1的height为7.5rem(150px)，若是切换成iphone6 plus的大小，box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px，与iphone6时的高度是不同的，写页面时会更加的美观。看效果：

看上面显示的效果就能够看出来，和计算出的结果是同样的，方法正确。之后能够用了。看看总体效果：

页面元素彻底没有被拉伸的效果，按照必定的比例缩放，保持页面效果美观。

源码

最后，附上博文地址github地址若是以为还能够的话，欢迎star，也欢迎一块儿交流~~~