h5c3---移动WEB开发---移动端常见布局（中）---8.21

接上篇

---

③移动WEB开发之rem适配布局（less+rem+媒体查询布局）

rem单位：rem(root em)是一个相对单位，类似于em，em是父元素字体大小，不同的是rem是相对于html元素的字体大小。比如，根元素(html)设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px。优点：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制。

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

/*媒体类型 mediatype  关键字 and|not|only 媒体特性 media feature*/
@media mediatype and|not|only (media feature) {
  CSS-Code;
}

mediatype 媒体查询类型：将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

关键字：关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

值	解释说明
and	可以将多个媒体特性连接到一起，相当于"且"的意思
not	排除某个媒体类型，相当于"非"的意思，可以省略。
only	指定某个特定的媒体类型，可以省略。

媒体特性：每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号。

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

媒体查询+rem实现元素动态大小变化：
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸。媒体查询可以根据不同设备宽度来修改样式。
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化。

引入资源（了解）：当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。原理就是直接在link中判断设备的尺寸，然后引用不同的css文件。

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

less基础：

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

Less介绍：Less（Leaner Style Sheets的 缩写）是一门CSS扩展语言，也成为CSS预处理器（常见的CSS预处理器：Sass、Less、Stylus）。它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，Less可以让我们用更少的代码做更多的事情。
Less中文网址：http://lesscss.cn/        Less是一门CSS预处理语言，它扩展了CSS的动态特性。

Less使用：新建一个后缀名为less的文件

• Less变量：变量是指没有固定的值。因为我们CSS中的一些颜色和数值等经常使用。

@变量名：值；
/*不能含特殊字符,不能以数字开头,大小写敏感*/

• Less编译：本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件，这样我们的html页面才能使用。

vocode Less插件：Easy LESS用来把less文件编译为css文件，安装完后，只要保存一下Less文件，会自动生成CSS文件。

• Less嵌套

.header {
   width:200px;
   height:200px;
   background-color:pink;
   a {
      color:red;
/* 如果有 伪类、交集选择器、伪元素选择器, 我们内层选择器的前面需要加 & */
      &:hover {
         color:blue;
      }
   }
}

• Less运算：任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(--)、乘(*)、除(/)算术运算。

@border:(5px+5)*2;

div {
    width: 200px-50;
    height: 200px+200;
    border: @border solid red;
    background-color: #666-#222;
}
img {
    width: (82/50)rem;
/*两个数参与运算，如果2个数都有单位，而且不一样的单位，最后的结果以第一个单位为准。*/
}

rem适配方案（重要）

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

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

元素大小取值方法
①最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
②屏幕宽度/划分的份数=html  font-size的大小
③或者：页面元素的rem值=页面元素值（px）/ html font-size字体大小

简洁高效的rem适配方案flexible.js（已经废弃）

手机淘宝团队出的简洁高效，移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的
我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以
里面页面元素rem值：页面元素的px值/75
剩余的，让flexible.js来去算

/*在index.html中引入flexible.js 这个文件*/
<script src="js/flexible.js"></script>