|
:rem布局
什么是rem
rem(root em)是一个相对单位，和em不同的是rem相对基准是对于html元素的字体元素大小来说的
例：
html设置的字体大小font-size：12px;非根元素的具体的单位是width：2rem;换算成px单位就是24px
媒体查询
媒体查询是css3的新语法，使用@media来进行查询，可以针对不同的媒体类型定义不同的样式， 也可以根据不同的屏幕尺寸来设定不同的样式。
媒体查询的语法规范
用@media来进行开头
mediatype媒体类型
all:用于所有设备
print：用于打印设备或者打印预览
screen：用于电脑屏幕、拼版电脑或者手机等
关键字 and not only
and:相当与且，将多个媒体特性连接在一起
not:相当于非，排除某个媒体类型
media feature 媒体特性，在小括号中书写
@media mediatype and/not/only (media feature) (css-code);
LESS
维护css的弊端：
css是一门非程序式的语言、没有变量、函数、作用域的概念
css书写的时候会写大量的看似没有逻辑代码，冗余程度比较高
不方便扩展和复用
css没有很好的计算能力
Less介绍
less是一门css扩展语言，也称为css预处理
作为css的一种形式的扩展，他并没有减少css的功能，而且在现有的css语法上，为其增加了程序式语言的特性
常见的css预处理器：
Sass、Less、Stylus等等
Less的编译
下载插件Easy Less将less文件编译
Less的嵌套
Less的运算
任何的数字、颜色或者变量都可以参与运算
基本的运算有：（+）、（-）、（*）、（/）
语法规范：
运算符左右两边要有空格运算隔开
除法运算时要用括号括住
对于两个不用的单位的值之间的元素，运算结果取前面的值的单位
如果两个参与计算的数值，只有一个值有单位，那么就用有单位值的单位
REM的适配方案
less+rem+媒体查询
原理：
让一些不能等比例自适应的元素，达到不同尺寸时，根据html字体大小变化来用rem作为单位，控制元素进行自适应变化。
rem的实际开发适配方案
总结：
公式：页面元素的rem值=页面元素的px值/html的字体大小
html的字体大小=屏幕的宽度/划分的份数
|
