移动WEB开发rem适配布局

1.rem单位

rem即root em，是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是根元素 ——html元素的字体大小。 比如根元素（html）设置font-size=12px；非根元素设置width: 2rem；则换成px表示就是24px。 使用rem可以很好来控制整个页面的元素大小

2.媒体查询

2.1 什么是媒体查询？

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

• 媒体查询最好的方法是从小到大。

2.2 语法规范

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

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

1. mediatype查询类型

 2. 关键字

 3. 媒体特性

 2.3 练习

1. 根据页面宽度改变背景颜色

 

 

/* 1. 按照从大到小的或者从小到大的思路
2.注意我们有最大值max-width和最小值min-width都是包含等于
3.当屏幕小于540像素，背景颜色变为蓝色（ x<= 539 )
4.当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(54O=<x<=969 )
5.当屏幕大于等于970像素的时候，背景颜色为红色（ x >= 970 ) */
/* <=539 如果会出现临界值空白的情况 可以尝试把539改为540 */
@media screen and (max-width:539px) {
body {
background-color: blue;
}
}
/* 540-969 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* >970 */
@media screen and (min-width:970px) {
body {
background-color: red;
}

2. rem实现元素动态变化

/* html {
font-size: 100px;
} */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}

<div class="top">购物车</div>

---

2.4 引入资源（理解）

 3.less基础

3.1维护css的弊端

Less ( leaner Style Sheets的缩写）是一门CSS扩展语言，也称为CSS预处理器。

做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语 言的特性。 它在CSS的语法基础之上，引入了变量，Mixin(混入），运算以及函数等功能，大大简化了CSS的编写， 并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

Less中文网址: http://lesscss.cn/

常见的CSS预处理器: Sass、Less、Stylus

一句话:Less是一门CSS预处理语3.3 Less安装言，它扩展了CSS的动态特性。

3.3 Less安装 

下载 | Node.js 中文网

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

GitHub - amfe/lib-flexible: 可伸缩布局方案