移动端rem布局总结（Reset257）

总结：rem有两种适配方案（做移动端）

• 第一种适配方案 rem + 媒体查询 + less
• 第二种适配方案 rem + flexible.js （推荐使用）

学得七七八八，记下来，记下来…😊

一、媒体查询

1、作用：让手机端，平板端和电脑端的网页显示出不同的CSS效果。（主要是尺寸、大小）

2、两种语法

第一种

<style>
    /* 表示屏幕尺寸最大值为800px */
    @media screen and (max-width: 800px){
        h1{
            font-size: 12px;
            color: red;
        }
        p{
            font-size: 10px;
        }
    }
     /* 表示屏幕尺寸为800px ~ 1200px */
    @media screen and (min-width: 800px) and (max-width: 1200px){
        h1{
            font-size: 15px;
            color: green;
        }
        p{
            font-size: 13px;
        }
    }
     /* 表示屏幕尺寸最小值为1200px */
    @media screen and (min-width: 1200px){
        h1{
            font-size: 18px;
            color: blue;
        }
        p{
            font-size: 15px;
        }
    }
</style>

就是把不同尺寸的都分一类出来写那样子

第二种

	<!-- 第二种方式 -->
    <link rel="stylesheet"  media="screen and (max-width: 800px)" href="./媒体查询1.css">
    <link rel="stylesheet"  media="screen and (min-width: 800px) and (max-width: 1200px)" href="./媒体查询2.css">
    <link rel="stylesheet"  media="screen and (min-width: 1200px)" href="./媒体查询3.css">

这种就比较像引入链接式的，个人感觉第一种比较常用

媒体查询MDN官方文档

二、rem的概念

1、rem是什么?

rem (font size of the root element)是指相对于 根元素（html 标签） 的字体大小的单位。简单的说它就是一一个相对单位。

2、rem 与 em 的区别

em (font size of the element)是指相对于 父元素 的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素，一个是依赖父元素计算。

3、rem能等比例适配所有屏幕，rem是通过根元素进行适配的，网页中的根元素指的是 html ，我们通过设置html的字体大小就可以控制rem的大小。

四、需要了解一点less

具体看 💁‍♂️ 💁‍♂️ 💁‍♂️ less学习笔记

五、方案一： rem + 媒体查询 + less

终于到正题了，东西有点杂…

1、新建一个common.less文件，在里面书写媒体查询的代码，一开始要先思考把页面分成几等份，设置每一个设备对应的html字体大小（rem是通过根元素进行适配的）。同时要单独设置在电脑显示时的html字体大小。

这里是考虑到设计稿宽度式 750，把界面 15 等份，每一份就是 50px。同时，把 15 在 less 里定义成一个变量 @no，在不同宽度的媒体查询里，用宽度 / @no，快速计算，这样就可以实现等比缩放

这个地方原理可以多琢磨琢磨🤨

// 单独设置手机端界面在电脑显示时的样式
html{
    font-size: 50px;// 一定要写在最上面
}
a {
    text-decoration: none;
}
// 定义一个份数15
@no:15;
// 320宽度
@media screen and (min-width: 320px){
    html{
        font-size: 320px / @no;
    }
}
// 360宽度
@media screen and (min-width: 360px){
    html{
        font-size: 360px / @no;
    }
}
// 375宽度，iPhone 6 / 7 / 8
@media screen and (min-width: 375px){
    html{
        font-size: 375px / @no;
    }
}
// 384宽度
@media screen and (min-width: 384px){
    html{
        font-size: 384px / @no;
    }
}
// 400宽度
@media screen and (min-width: 400px){
    html{
        font-size: 400px / @no;
    }
}
// 414宽度
@media screen and (min-width: 414px){
    html{
        font-size: 414px / @no;
    }
}
// 424宽度
@media screen and (min-width: 424px){
    html{
        font-size: 424px / @no;
    }
}
// 480宽度
@media screen and (min-width: 480px){
    html{
        font-size: 480px / @no;
    }
}
// 540宽度
@media screen and (min-width: 540px){
    html{
        font-size: 540px / @no;
    }
}
// 720宽度
@media screen and (min-width: 720px){
    html{
        font-size: 720px / @no;
    }
}
// 750宽度
@media screen and (min-width: 750px){
    html{
        font-size: 750px / @no;
    }
}
// 768宽度
@media screen and (min-width: 768px){
    html{
        font-size: 768px / @no;
    }
}

2、写好common.less文件之后，新建一个index.less文件，在less里面编写首页样式让他自动生成css文件。

同时导入common文件，@import "common"; 可以不用加文件后缀名 并且因为index.css 导入了 common.css，所以 index.less 不需要 link common.css

// 第一种适配方案 rem + 媒体查询 + less
@import "common";
// @import "common";是导入comon 样式，和link 引入有点不一样
body{
    min-width: 320px;
    width: 15rem;
    // 也就是15 * 50 px = 750px
    margin: 0 auto;
    line-height: 1.5;
    background-color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
}

3、然后就可以正常地开始书写样式，只不过把px单位的设置都转换成rem，具体计算公式：

页面元素的rem值 = 设计稿页面元素值(px) / 设计稿 html font-size 字体大小

例如下面，设计稿得出left的宽度为44px，高度为70px，根据公式，事先定义了一
个变量 @baseFont:50

@baseFont:50;
.left{
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
    }

我自己对公式的的理解：

由于是在设计稿也就是页面宽度为750下进行测量的，为了使得页面在更小的宽度下可以等比例缩放，这里需要求出在750宽度下，每一个像素值对应页面的rem值，这样即使换了不同的页面大小，计算的值是rem，会根据不同html的字体大小进行换算。

750宽度下，字体大小是50px，定义了一个变量 @baseFont:50；因此假设换算的像素值为88px。Xrem / 88px = 1rem / 50px ，由此可得 页面元素的rem值（X） = 设计稿页面元素值（88）/ 设计稿 html font-size 字体大小（50），即 88 rem / @baseFont 不要误会，这里88后面的rem只是为了让计算出来的值单位是 rem 才加上去的。

总结：第一种适配方案主要还是通过 rem + 媒体查询 + less 配合完成，当然在实际写页面的时候可以混着弹性盒子来做三栏布局。但由于媒体查询需要写多个设备的尺寸，显得有些麻烦。

六、方案二：rem + flexible.js （推荐使用）

1、基本思路

不需要在写不同屏幕的媒体查询，因为里面js做了处理，它的原理是把当前设备划分为10等份（和第一种分成15份不一样），但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了，比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/ 10)就可以里面页面元素rem值：页面元素的px值 / 75，剩余的让flexible.js来去算。

github地址: https://github.com/amfe/lib-flexible

2、方案准备

在这种适配方案下安装好插件 cssrem 即可实现像素自动转换成 rem，不需要手动去计算页面元素的px值 / 75，不过要把默认的px转化进制设置一下。

• 具体设置方式：设置（ctrl + ,）——搜索cssroot——把默认的cssroot fontsize 改成需要的
• 假设该页面设置为75px，即 1rem = 75px 。

3、开始写页面

• 第二种方案不需要用到 less，因此直接新建 index.html 和 index.css，在里面直接写就好
• index.html 除了引入样式表，还需要把下载的 flexible.js 引入，让js帮我们实现划分媒体查询
• 苏宁首页案例中由于 search 的 width 是设置为10rem，当在PC端全部显示时，宽度就是1300多，因此需要媒体查询设置在宽度超过750时，默认把html字体大小设置为75px，让search的width转换时宽度为750px，权重不够用 !important
• 然后就正常编写页面，直接输入设计稿样式的像素值，插件安装后会有提示直接转换成 rem，非常方便！

@media screen and (min-width: 750px) {
    html{
        font-size: 75px!important;
    }
}

理解一下，写一个移动端首页练一练就是了！