移动WEB-rem布局篇

1. 概述

rem布局主要的作用就是：根据屏幕的大小的不同，改变盒子的高度和文字的大小

2 rem单位

1. rem 和 em 类似，都是相对单位
2. em 相对的是父元素的字体大小
3. rem 相对的是html 根元素的字体大小

3. 媒体查询

3.1 什么是媒体查询：

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

3.2 语法规范：

	@media mediatype 关键字 （media feature）{
     }

1. 用 @media 开头
2. mediatype 媒体查询取值：
        all 用于所有设备
        print 用于打印机和打印预览
        scree 用于电脑屏幕、平板电脑，智能手机
3. 关键字（关键字将媒体类型或多个媒体特性连接到一起，作为媒体查询条件）
        and 可以将多个媒体特性连接在一起，相当于并且的意思
        not 排除某个媒体类型，相当于非的意思，可以省略
        only指定某个特定的媒体类型，可以省略
4. media feature 媒体特性 必须有小括号包含，取值：
        width 定义输出设备中页面可见区域的宽度
        min-width 定义输出设备中页面最小可见区域宽度
        max-width 定义输出页面中页面最大可见区域宽度
        （暂时了解三个）

示例：

	@media screen and (max-width:800px) {
     
		body {
     
			background-color:pink; /*在我们屏幕上 并且 最大宽度是 800像素（小于或等于800），设置我们想要的样式*/
		}
	}

3.3 rem单位 + 媒体查询，实现rem布局

1. 使用媒体查询实现不同的屏幕大小，设置不同的html标签的字体大小
2. 把需要根据屏幕大小改变大小的，盒子或字体的单位设置为rem

3.4 使用媒体查询判断，引入不同CSS资源

1. 语法规范：

示例：

	/*根据不同的屏幕尺寸引进不同的css文件*/
	"stylesheet" href="style100.css" media="screen and (min-width:320px)">
    "stylesheet" href="style50.css" media="screen and (min-width:540px)">

4. Less基础

4.1 CSS的弊端

1. CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
2. CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高得
3. 不方便维护及扩展
4. CSS没有很好的计算能力
5. 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

4.2 Less介绍

1. Less 是一门 CSS 扩展语言，也称为 CSS预处理器
2. 作为CSS的一种形式的扩展，它并没有较少CSS的功能，而是在现有的CSS语法上，为CSS加入了程序式语言的特性
3. 它在CSS语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS
   的维护成本
4. Less中文网址：http://lesscss.cn
5. 常见的CSS预处理器：Sass、Less、Stylus

4.3 Less 的使用

1. 首先新建一个后缀名为less的文件，在这个less文件里面书写less语句

4.4 Less 变量

1. 变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用
2. 变量命名规范：@变量名：值
   a. 必须有@前缀
   b. 不能包含特殊字符
   c. 不能以数字开头
   d. 大小写敏感

示例：

.less文件中：
	/*定义一个粉色的变量*/
	@color:pink;
/*==========================================*/
	/*使用变量*/
	body {
     
		backgroun-color: @color;
	}	

4.5 Less 编译

1. 本质上，Less包含一套自定义语法及一个解析器，用户根据这些语法定义自己的规则，这些规则最终会通过解析器，
   编译生成对应的CSS文件
2. 所以，我们需要把Less文件，编译生成为CSS文件，这样我们的html页面才能使用
3. VoCode Less插件：在VoCode代码编写工具中，安装 Easy LESS 插件，来编译Less文件，安装完毕插件，重新加载
   下VoCode，只要保存一下Less文件，它自动生成一个同名的CSS文件
4. 然后在html页面中引入css文件就可以了，每次修改Less文件然后点击保存之后，会自动同步CSS文件

4.6 Less 嵌套

1. 子、后代元素的样式可以直接在父元素的选择器中书写
2. 如果遇到（交集 | 伪类 | 伪元素选择器），前面需要加&。没加会被解析为父选择器的后代，加了会被解析为父元素
   自身或父元素的伪类

/*.Less文件中：*/
@color: pink;
div {
     
    width: 200px;
    height: 200px;
    background-color: @color;
    a {
     
        text-decoration: none;
    }
}
/*========================编译后=============================*/
/*.CSS文件中*/

div {
     
  width: 200px;
  height: 200px;
  background-color: pink;
}
div a {
     
  text-decoration: none;
}

4.7 Less 运算

1. 任何数字，颜色或者变量都可以参与运算。就是less提供了加（+）、减（-）、乘（*）、除（/）运算术
2. 运算符两边要有空格1px * 5
3. 对两个不同单位的值进行运算，运算结果的值的单位取第一个值的单位
4. 颜色数值参与运算必须加#
5. 运算可以使用（）提升优先级
6. 变量也可以参与运算

	/*.Less文件中：*/
	@color: pink;
	div {
     
    width: 200px - 50;
    height: 200 + 100px;
    background-color: @color - #222;
    font-size: 12px;
    span {
     
        display: block;
        width: 82 / 50rem;
        height: 3rem * 10;
    }
}
/*========================编译后=============================*/
	/*.CSS文件中*/
    div {
     
 	  width: 150px;
 	  height: 300px;
  	  background-color: #444444;
 	  font-size: 12px;
	}
   div span {
     
 	 display: block;
 	 width: 1.64rem;
 	 height: 30rem;
   }

5. rem 适配方案

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

5.1 rem 实际开发适配方案

1. 按照设计稿与设备宽度比例，动态计算并设置html根标签的 font-size 大小；（媒体查询）
2. CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

5.2 rem 适配方案技术使用（市场主流）

1. 技术方案一：less + 媒体查询 + rem
2. 技术方案二：flexble.js + rem

总结：两种方案现在都存在，方案二更简单

6 rem 实际开发适配方案一

less + 媒体查询 + rem

6.1. 设计稿常见尺寸宽度

6.2. 动态设置html标签font-size大小

	 @media screen and (min-width:320px) {
     
            html {
     
                font-size: 21.33px;
            }
        }
        @media screen and (min-width:750px) {
     
            html {
     
                font-size: 50px;
            }
        }
        div {
     
            width: 2rem;
            height: 2rem;
            background-color: coral;
        }    

3. 元素大小取值方法
   a. 公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分分数）
   b. 屏幕宽度 / 换分分数 就是 html 的 font-size 的大小
   c. 或者：页面元素rem值 = 页面元素值（px） / html font-size 字体大小

6.3 苏宁网移动端首页

1. 苏宁网页移动端首页

2. 技术选型

3. 搭建文件夹结构

4. 设置视口标签以及引入初始化样式

5. 设置公共的 common.less 文件

6. 新建index.less文件

7. body 样式

7. rem 适配方案二

7.1. 简介高效的rem适配方案flexible.js

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

7.2 使用适配方案二制作苏宁移动端首页

1. 技术选型

2. 搭建相关文件夹结构

3. 设置视口标签以及引入初始化样式还有js文件

4. 设置body样式

	body {
     
  	   min-width: 320px;
       max-width: 750px;/*因为html的字体大小是用视口宽度除以10的，所以这里必须要设置最大宽度*/
       width: 10rem;
       margin: 0 auto;
       line-height: 1.5;
       font-family: Arial, Helvetica;
       background-color: #f2f2f2;
 }

5. VoCode px转换rem 插件 cssrem

1. 插件：cssrem
2. 这个插件默认的html字体大小 cssroot 16px，需要我们手动修改
3. 修改--文件--首选项--设置--搜索cssroot--修改html默认字体大小（修改成设计稿尺寸除以10份的值，一般750/10）
4. 不需要借助`Less`，直接在`CSS`文件中写`px`单位，将自动转换成`rem`单位

6. css中设置

1. 此时我们在css中书写的rem值 = 视口宽度/10
2. 我们要把rem值设置成设计稿的宽度/10
3. 使用媒体查询来设置

	/*如果我们的屏幕（视口）超过了 750px 那么我们就按照 750 设计稿来走，不会让我们页面超过 750px*/
	@media screen and (min-width: 750px) {
     
		html {
     
			font-size: 75px!important; /*因为会被flexible.js层叠掉，所以要提高权重*/
		}
	}