移动端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 字体大小。