CSSrem适配

一、rem
(一)rem单位大小是根据html根标签的font-size 来决定的。
根标签的font size是根据屏幕大小来定。
rem的优点：就是可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制
1.vw :将屏幕分成100份 1VW单位等同于屏幕宽度的1/100 
2.em:一个em等于父元素font-size的值
3.px
公式换算
100vw = 390pх 
 x=100px

二、媒体查询
1.屏幕区间可写作 手机屏幕大小
2.使用 @media查询（1）可以针对不同的媒体类型定义不同的样式
                                （2）@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中 ,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、 Android手机 ,平板等设备都用得到多媒体查询。
3.not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则

4.关键字：

and:可以将多个媒体特性连接到一起，相当于“且”的意思

not:排除某个媒体类型，相当于“非”的意思，可以省略

only:指定某个特定的媒体类型，可以省略
三、为什么web app要使用rem？
1、实现强大的屏幕适配布局
最近iphone6一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做web app有一种做法是以320宽度为标准去做适配，超过320的大小还是以320的规格去展示，这种实现方式以淘宝web app为代表作，但是近期手机淘宝首页进行了改版，采用了rem这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。
2.固定宽度做法
还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了rem。
3.响应式做法
响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。
4.设置viewport进行缩放
天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。