前端移动开发布局_rem+less+媒体查询

知识导航

• 何为rem
• 何为媒体查询
• 何为less
• 目前主流方案

前言：

rem适配方案
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。现在我们就可以真正做到随着设置尺寸的变换所有的元素自适应了
原理：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

1. 何为rem

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。而rem的参照物是html的fontsize
比如

	 html {
            font-size: 20px;
        }
        
        div {
            width: 2rem;
        }

此时div的宽度为2倍的html字体大小，即为40px。

2. 媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
基本使用：

@media mediatype and|not|only (media feature) {
   
}

• 类似于动画使用@media打头定义
• mediatype 媒体类型
  属性值如下：
  
  一般我们用的到的也就是第三个。
• 关键字，and、not、only。关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
  - and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  - not：排除某个媒体类型，相当于“非”的意思，可以省略。
  - only：指定某个特定的媒体类型，可以省略。
• 媒体特性，每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，注意的是要放在小括号里面。
  先介绍一下它们的常用值：
  
  接下来看一下小案例深入了解一下吧
  效果图：
  
  关键代码：

   @media screen and (max-width: 540px) {
            body {
                background-color: aqua;
            }
        }
        
        @media screen and (min-width: 540px) {
            body {
                background-color: red;
            }
        }
        
        @media screen and (min-width: 1000px) {
            body {
                background-color: yellow;
            }
        }

推荐写法：

不然这里的第二段范围便麻烦了些，须同时规定两端的尺寸。

    @media screen and (min-width: 1000px) {
            body {
                background-color: aqua;
            }
        }
        
        @media screen and (min-width: 540px) and (max-width: 1000px) {
            body {
                background-color: red;
            }
        }
        
        @media screen and (max-width: 540px) {
            body {
                background-color: yellow;
            }
        }

3. less

何为less呢，less其实就是对css所做的扩展。那less有什么作用呢
下面我先来介绍一下css的缺点;

• css没有计算能力，没有变量。
• CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度很高的。
• 不方便维护及扩展，不利于复用

在rem布局的时候，我们就被要求必须把宽高字体等从px转到rem。这里就用到了大量的计算。
如定义的html的fontsize为20，我们盒子的宽度等需要设置大小的东西就必须统统的除以20.求得rem。这要是人为的话估计我们得把电脑砸了。不说一个网站了，一个主要页面就得多少。这时less的强大就体现出来了。

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

less的安装也十分简单，当然这里需要我们事先安好了node。node安装同样简便在我们hexo博客搭建有写过这里便不再说了。less安装命令npm install -g less
vscode 插件：Easy LESS ，用来把less文件编译为css文件

简单使用：

和css外联版一样，先建一个后缀为less的文件。我们的Easy LESS插件会自动给我们转换为css文件。我们只需将这个css文件link到我们的html就行了。看一下less的使用吧
less变量：

@变量名:值;

必须有@为前缀
不能包含特殊字符
不能以数字开头

示例：

@color:yellow;
body {
    background-color: @color;
}

less嵌套：

结构：

        

    
    
传统设置样式：
.div01 {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}
.div01 .div02 {
  width: 30px;
  height: 30px;
  background-color: red;
}

less中：
.div01 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    .div02 {
        width: 30px;
        height: 30px;
        background-color: red;
    }
}

如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

传统：
a:hover{
    color:red;
}
less中：
a{
  &:hover{
      color:red;
  }
}

Less 运算：
任何数字、颜色或者变量都可以参与运算。Less提供了加、减、乘、除算术运算。

在less中使用加法操作，可见其自动生成的css文件已经帮我们做好了
值得注意的是：

• 运算符中间左右要用空格隔开
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 。如1px+1rem最后为2px
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

4. 目前主流方案

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

方案二：lflexible.js+rem（淘宝推出，利用js随时监测设备宽度）

实际开发步骤：
先介绍方案一（方案二较为简单不做介绍，它的原理是把当前设备划分为10等份。我们要做的，就是确定好我们当前设备的html 文字大小就可以了）：
①假设设计稿是750px
②我们便把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份），每一份作为html字体大小，这里就是50px。那么在320px设备的时候，字体大小为320/15就是 21.33px
③因为设置的在不同宽度是html字体大小是不同的，我们页面元素的大小便可以以它作为基准。因为参照物是相同的。所以所有元素的比例是不会改变的。如参照物为2px，某一元素的宽高均为2倍的它。即均为4/2=2rem。当设备宽度改变时参照物变为了4px，这一元素等比扩大化为px仍然为8px8px的正方形盒子。可见除了大小它们的形状没有受到任何影响。
④这便实现不同屏幕下 页面元素盒子等比例缩放的效果

提炼：

• 屏幕宽度/划分的份数就是 htmlfont-size 的大小
• 页面元素的值 /htmlfont-size 的大小就是所得rem值
  注意less运算的单位关系
  如盒子宽50px，htmlfont-size为20px。我们所要的rem值=50rem/20 。注意less中的单位