[前端学习笔记] CSS移动端rem布局

一、rem布局

技术方案1： rem + 媒体查询 + less
技术方案2： rem + flexible.js【推荐】

二、rem是什么

rem（root em）是一个单位。它可以实现：
1）页面布局文字随屏幕大小变化而变化
2）屏幕变化时，宽度和高度可以等比例缩放
rem的优点就是可以通过修改html文字大小来改变页面中元素的大小，可以整体控制。

<style>
        html {
            /* 设置html文字大小 */
            font-size: 14px;
        }
        div {
        	/* 设置父元素文字大小 */
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        p {
        /* 对比理解em和rem */
            /* 1. em相对于父元素的字体大小来说，得120*120 */
            width: 10em;
            height: 10em;
            /* 2. rem相对于html字体大小来说，得140*140 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
</style>

二、媒体查询 Media Query

媒体查询是CSS3的新语法，可以根据不同的屏幕尺寸设置不同的样式。
书写语法如下：

@media mediatype and/not/only (media feature){
     CSS-Code;
}

mediatype 媒体类型分为：all(所有设备)、print(打印机)、screen(屏幕)
关键字分为：and(且)、not(非)、only(特定)
media feature 媒体特性：max-width(<=)、min-width(>=)

    <style>
        /* 1. 媒体查询一般按照从大到小或从小到大的顺序 */
        /* 如果在我们屏幕上 并且 宽度<=800像素 则html字体大小为50px */
        @media screen and (max-width: 800px) {
           html {
                font-size: 50px;
            }
        }
        /* 2. 注意代码的层叠性 */
	    /* 如果在我们屏幕上 并且 宽度<=500像素 则html字体大小为100px */
        @media screen and (max-width: 500px) {
            html {
                font-size: 100px;
            }
        }
    </style>

通过上面的代码，结合rem可以实现根据屏幕的尺寸大小改变html字体大小，进而改变页面中元素的大小的效果。
针对于不同的屏幕尺寸可以调用不同的css文件 ，方法如下：
（媒体查询最好的方法是从小到大）

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

三、Less

已知CSS具有以下缺点：
1）书写没有逻辑，冗余度高
2）不方便维护和扩展、复用
3）没有很好的计算能力

Less可以很好的解决上面存在的问题。Less(Leaner Style Sheets)是CSS扩展语言，CSS预处理器。为CSS加入程序式语言的特性，引入变量、函数、运算、混入等功能，降低了CSS维护成本。
·Less中文网址：http://lesscss.cn/
·常见的CSS预处理器：Sass、Less、Stylus
·VSCode中less的插件：Easy LESS，可以实现在保存less文件时自动编译生成对应的CSS文件。

1. less变量方便维护和扩展、复用

// less变量：
// 1）必须有@前缀
// 2）不能有特殊符号，不能以数字开头
// 3）区分大小写
@color: pink;  
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

2. less书写有逻辑，冗余度低，可嵌套

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
    }
}

3. less有很好的计算能力

// + - * / 运算
// 运算符的两边必须有空格，现在的版本除法要加括号
// 如果只有一个数有单位，则最后的结果就以这个单位为准；
// 如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准。
@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: (82rem / @baseFont);
    height: (82rem / @baseFont);
}

下面的插件可以实现px自动转化为rem，可以通过【点击设置后输入cssroot】修改cssrem的html字体大小。

四、flexible.js

flexible.js是手机淘宝团队出的简洁高效的“移动端适配库”。

原理是把当前设备划分为10等份，但是不同设备下比例还是一致的。
如果我们当前设计稿是750px，那么将cssrem的html文字大小设置为(750/10=75px)

/* 如果我们的屏幕超过了750px 那么我们就按照750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

五、开发步骤

1. 首先选一套标准尺寸（例如设计稿为750px）
2. html文字大小 = 屏幕尺寸 / 划分的份数
3. 页面元素的rem值 = 页面元素在750px下的像素值 / html文字大小
   可以在cssrem中设置计算好的html文字大小，即可直接生成rem值。

六、【补充】vw和vh

1. vw和vh是相对单位。
   vw(viewport width)为视口宽度单位，1vw = 1/100视口宽度
   vh(viewport height)为视口高度单位，1vh = 1/100视口宽度
2. vw和百分比的区别是什么
   百分比相对于父元素来说的
   vw是相对于当前视口来说的

div {
    /* ip6 视口375px 1vw=3.75px */
    /* 则计算结果 50px/3.75=13.3333vw  */
    width: 13.3333vw;
    height: 13.3333vw;
    background-color: pink;
}

在VSCode配置自动转换的插件。

在px2vw的设置里修改当前的视口宽度，即可实现正确的转换：

七、【补充】轮播图快速制作

https://www.swiper.com.cn
下载Swiper后，在项目中引入相应的文件：

<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/swiper.min.js"></script>

在网站中的基础演示部分，选择合适的轮播图，复制相应的代码，根据设计稿修改部分样式即可。

八、【补充】二维码生成

https://cli.im/text