移动端rem适配布局学习总结

1.rem基础

rem 是单位
rem（root em）是一个相对单位，类似于em，em是父元素字体大小
不同的是rem的基准是相对于html的文字大小。
比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px。
优点：
·通过修改html文字大小改变页面元素大小

2.媒体查询

2.1什么是媒体查询
媒体查询（Media Query）是CSS3的新语法。
·@media 可以针对不同的屏幕尺寸设置不同的样式

2.2语法规范

@media mediatype and | not |only (media feature) {
	css-Code

}
//**********************
@media screen and  (max-width：800px) {
	body {
	       background-color：pink；    //这里媒体查询的属性就是，当屏幕在<=800px的情况下，body背景色为pink	
	}
}
//***********************
@media screen and  (min-width：500px) and (max-width：800px) { // 代码层叠性会将他重叠覆盖
	body {
	       background-color：pink；    //这里媒体查询的属性就是，当屏幕在500<=x<=800px的情况下，body背景色为pink	
	}
}

· 用@media开头 注意@符号
· mediatype 媒体类型
· 关键字 and not only
· media feature 媒体特性 必须有小括号包含

1.mediatype 查询类型

将不同的终端设备划分成不同的类型，成为媒体类型
值 解释说明

• all 用于所有设备
• print 用于打印机和打印预览
• screen 用于电脑屏幕、平板电脑、智能手机等。
  2.关键字
  关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件
  • and：可以将多个媒体特性链接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思，可以省略。
  • only：制定某个特定的媒体类型，可以省略。
    3.媒体特性
    每种媒体特性类型都具体各自不同的特征，根据不同的媒体类型的媒体特性设置不同的展示风格，暂时了解三个
    值 解释说明
  • width 定义输出设备中页面可见区域的宽度
  • min-width 定义输出设备中页面最小可见区域的宽度
  • max-width 定义输出设备中页面最大可见区域的宽度
  • 最大值和最小值都是包含等号的
    注意：
    ? 媒体查询一般是按照从大到小或者从小到大的顺序写得
    ? screen 和 and 不能省略 ，数字后面必须跟单位
    2.3 媒体查询+rem实现元素动态大小变化
    rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸。
    媒体查询可以根据不同设备宽度来修改样式。
    媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化。
    2.4引入资源（理解）
    当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）。
    原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。
    1.语法规范

3.Less基础

3.1 维护css的弊端

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

3.2Less介绍

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

3.3Less安装

Less 使用
新建一个后缀名为less的文件，在这个less文件里面写less
· less变量
· less编译
· less嵌套
· less运算

3.4.Less 变量

变量是美玉固定的值，可以改变的。

@变量名：值；

1.变量命名规范
· 必须有@为前缀
· 不能包含特殊字符
· 不能以数字开头
· 大小写敏感

3.5Less 编译

要把less文件编译成css文件，我们的html页面才能使用；

3.6Less嵌套

less嵌套，子元素的样式直接写到父元素里面就可以，相当于后代选择器
div {
a {
}
}
遇到 交集、伪类、伪元素选择器：
· 内层选择器的前面没有&符号，则它被解析为父选择器的后代；
如果有&符号，他就被解析为父元素自身或父元素的伪类。

 &：hover；  
 &：：before;

3.7Less 运算

任何数字、颜色或者变量都可以参与运算。less提供了加减乘除算数运算。
注意点：
· 乘号 * 和 除号 / 的写法
· 运算符中间左右有个空格隔开 1px + 5；
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
· 如果两个值之间只有一个值有单位，则运算结果就取该单位

4.rem适配方案

4.1 rem实际开发适配方案
· 按照设计稿与设备宽度的比例，动态计算并设置html 根标签的font-size大小（媒体查询）
· CSS中，设计稿元素的宽,高,相对位置等取值，按照同等比例换算rem为单位的值。
4.2rem适配方案技术使用（市场主流）

技术方案1

· less
· 媒体查询
· rem

技术方案2 推荐

flexible.js 淘宝的适配 方案（将屏幕划分成10等份）
rem
第二方案更简单，推荐使用，后期了解js代码就可以。

4.3 rem实际开发适配方案1

rem + 媒体查询 + less
元素大小取值方法
1 · 最后的公式：页面的元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的分数）
2 · 屏幕宽度 / 划分的份数 就是html 的font-size 的大小
3 · 或者：页面元素的rem值 = 页面元素值（px）/ html font-size 字体大小。