分辨率兼容学习笔记

当窗口大于1024px 时，指挥被压缩，并不会发生其他变化
当窗口小于1024px，大于720px的时候，右侧栏取消浮动，在下边显示：
当窗口小于720px的时候，左中右三栏，全都取消浮动，宽度100%：
@media 类型 and (条件1) and (条件二) {
css样式
}

// 2.使用@import导入
@import url(“css/moxie.css”) all and (max-width:980px);

// https://blog.csdn.net/u014490083/article/details/79164235

rem实现自适应布局
参考：http://caibaojian.com/web-app-rem.html

rem能等比例适配所有屏幕？？？

rem是如何工作的？
rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小

方法1：通过JS去动态计算根元素的font-size，这样的好处是所有设备分辨率都能兼容适配。
淘宝首页目前就是用的JS计算
怎么计算不同宽度下font-site的值？
举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。

方法2：

一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配，例如下面这样：

html {
font-size : 20px;
}

@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}