前端入门系列--移动web开发rem布局

rem布局主要是利用rem、媒体查询以及less技术实现在不同宽度的屏幕下达到自适应的效果；

1、rem介绍

在介绍rem之前先介绍em，em是父元素的字体大小，比如一个子盒子的宽度为2em，而且父盒子的font-size是15px，则该子盒子的宽度是2em=15px*2=30px；


而ren则是html标签中设置的字体大小，比如该页面中：

html{
    font-size:15px;
}

此时若在该页面任意位置写大小3rem则代表3*15px=45px；
相比em，rem在整个页面中html的文字大小只有一个font-size能够做到大小一致

2、媒体查询介绍

媒体查询是css3中的新语法：

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式；
• @media 可以针对不同的屏幕尺寸设置不同的样式；
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询；

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

1、mediatype是媒体类型，
一般屏幕的值使用的较多

2、and这些是关键词，将后面的多个媒体特性连接起来作为媒体查询的条件，如当需要选择屏幕宽度在540px-969px之间的时候：

3、media feature是媒体特性，暂且了解一下三种：

分别表示宽度在某个数值时、大于等于某个数值时以及小于等于某个数值时的情况；

注意：一般媒体查询的顺序是有小到大，而后面的会将前面重复的部分覆盖，所以上面and连接两个媒体特征可被简化

通过媒体查询我们可以给不同的宽度大小下的html设置不同的font-size从而实现页面元素随屏幕宽度变化的效果，如下则是设置宽度≥320px时的字体大小为50px而宽度≥640px时字体大小为100px：

4、在媒体查询中海油引入资源的概念，在不同的屏幕大小时引入不同的css文件：

具体代码如下：

3、less语言

我们上面若想利用rem以及媒体查询实现页面元素大小随屏幕宽度变化，但这样我们在每次写rem单位时都需要根据美工给的图px大小进行换算成rem十分麻烦，less就可以帮助我们自动换算；


首先普通css的缺点如下：
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

• CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的；
• 不方便维护及扩展，不利于复用；
• CSS 没有很好的计算能力；
• 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目；

而Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器（其它css预处理器还有Sass、stylus…）。其在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本；


less的安装：

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/；
②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可；
③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可；
④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可；

less变量：

@变量名:值;

具体在代码中如下：

在上面定义变量，在下面使用，记得不要漏掉@；

less编译：
当我们在用写less时，less文件的后缀名是.less，我们必须将其编译为.css文件后才能在html文件中进行引入；
可以在vscode中使用Easy LESS 插件，当该插件开启时，只要保存.less文件则会自动编译成.css文件；

less嵌套：
正常的css嵌套与less的嵌套分别如下代码所示：

// css的嵌套
#header .logo {
  width: 300px;
}
//less的嵌套
#header {
    .logo {
       width: 300px;
    }
}

且当出现（交集|伪类|伪元素选择器）时 ，利用&进行连接，如下所示：

//css中的代码
a:hover{
    color:red;
}
//less中的代码
a{
  &:hover{
      color:red;
  }
}

伪元素选择器：

less计算：
此外less可以利用±*/()等进行运算，从而克服上面只利用rem以及媒体查询时要手动计算rem值的问题，如下所示：

less计算注意如下：

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

4、rem布局

## 4.1rem布局方案1

我们上面已经分别介绍完了rem、媒体查询以及less，现在可以结合三者进行rem布局了；


rem布局的目的：
1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当;tml字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配;

该方案主要思路如下：
①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

具体步骤：
1、确定技术选型：上面已经确定是这三者的结合使用；
2、搭建文件夹结构：之前博客中说过要搭建哪些文件夹等相关内容；
3、视口标签以及引入之前讲过的初始化css normalize.css：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

4、设置公共common.less文件：

• 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
• 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px（但实际不会写到这么多个）
• 划分的份数我们定为 15等份（也有分10等份、20等份的）
• 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面，该点解析如下：
  
  让pc端打开时是50px，其他屏幕大小再随媒体查询变化；
  
  
  项目中遇到的一些其它技巧：
  1、上面已经写好了common.less，而我们页面1的自身的less为index.less，在这种情况下页面1要引入两个less编译后的css文件，也可以在index.less中引入commo.less这样在html中只要引入index.css即可；在一个less中引入另一个less的方法如下：
  
  注意：import是在less中引入，而link是把css文件引入到html中；

2、之前在body中给最大最小宽度，现在只写最小min-width即可，在html写了最大时的font-size，则宽度xxrem在50px时即是最大的宽度：

3、在父盒子中放置背景图片，则背景图片需要与用rem单位进行缩放background-size才能随屏幕一起变化；
4、圆角制作：border-radius的大小是其高度的一半

4.2rem布局方案2

上面讲的rem+媒体查询+less的方法比较麻烦，而淘宝团队推出的flexible.js;
通过flexible.js，我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html 文字大小就可以了。
比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 即可。里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算；


下载好.js文件后将其引入到html中，

且不同于上面，这里必须给body：max-width否则会过大；

此外，vscode中有cssrem插件可以帮我们自动将px转换成rem单位，免去我们手动计算的麻烦，但在使用时必须注意更改默认的大小；