媒体查询与rem

rem与em

两者都用于设置字体大小，值都代表倍率，rem也可以用于设置盒子大小
设置了em的元素字体大小依据其自身字体大小或者其父元素的字体大小进行等比例缩放；
设置了em的元素字体大小依据html元素的字体大小进行等比例缩放。

html默认字体大小为16px 最小渲染的大小为12px

媒体查询（css3）

根据不同窗口大小来设置html字体大小，从而通过rem改变字体，元素的大小。

媒体查询语法

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

mediatype 媒体类型；
	all			用于所有设备
	print		用于打印机和打印预览
	screen		用于平板、pc、以及智能手机等
and|not|only 关键字
	and			可以将多个媒体特性连接到一起，相当于“且”的意思。
	not			排除某个媒体类型，相当于“非”的意思，可以省略。
	only		指定某个特定的媒体类型，可以省略；
media feature 媒体特性，必须有小括号包含，根据不同媒体类型的媒体特性设置不同的展示风格。
	width
	min-width
	max-width

为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们通常还是使用从小到大来写

@media screen and (max-width: 540px) {
	html { background-color: orange; }
}
@media screen and (min-width: 540px) {
	html { background-color: aqua; }
}
@media screen and (min-width: 970px) {
	html { background-color: red; }
}

换个思考方式，也可以这样写

@media screen and (min-width: 970px) {
  html { background-color: red; }
}
@media screen and (max-width: 970px) {
  html { background-color: aqua; }
}
@media screen and (max-width: 540px) {
  html { background-color: orange; }
}

以上屏幕小于540px显示橙色，屏幕在540px与970px之间显示橙色，屏幕大于970px显示红色

通过行内样式属性进行分别引入不同的css样式

<link rel="stylesheet" href="./backgroundColorAqua.css" media="screen and (max-width:414px)">
<link rel="stylesheet" href="./backgroundColorRed.css" media="screen and (min-width:415px)">

/*backgroundColorAqua.css*/
html{
    background-color: aqua;
}

/*backgroundColorRed.css*/
html{
    background-color: red;
}

以上屏幕小于414px显示蓝色，大于415px显示红色

flexible.js

淘宝开发的移动端屏幕适配的插件，原理和媒体查询类似
具体使用方法可以参考：（转发）
https://github.com/beipiaoyu2011/flexible

rem适配方案

1.媒体查询+less+rem
2.flexible.js+rem