CSS3知识回顾（12）

rem布局

1. em是父元素的大小,字符

• 相对与父元素的字体大小

2. rem的基准是相对于html的字体大小

• 优势：可以通过修改html里面的文字大小来改变页面中的元素的大小来整体控制页面

媒体查询

1. 可以针对不同的屏幕的尺寸设置不同的样式

@media mediatype and|not|only(media feature){}

2. 媒体类型

• all
• print
• scree(用于电脑屏幕，平板，手机)

3. 关键字

• and
• not
• only

3. 媒体特性

• max-width/min
• 从小到大写代码更简洁，使用层叠性

4. 媒体查询+rem实现元素的动态变化
5. 媒体查询引入资源link

less

1. css的扩展语言，Sass,less,Stylus
2. less变量

• @color(变量名区分大小写)

3. less编译 easy less
4. less嵌套子元素的样式直接写道父元素里面就好了

• 伪元素要加&

5. 使用less运算方便计算（有空格隔开）

• 运算过程中两个都有单位以第一个为准

6. import在样式文件中相导入

rem适配方案

1. 实现页面元素的自适应，实现等比缩放的适配
2. rem适配方案flexible.js
3. flexible.js在宽度超出750px后使用媒体查询，强制修改宽度为75px