移动端大行其道，rem/em、百分比、响应式方案更是层出不穷，看见周围的伙伴们都在对使用rem和百分比情有独钟，可我却偏不爱，之所以出现如此多的方法，其目的只有一个屏幕适配。

屏幕适配顾名思义就是一张设计稿还原出的程序要适应于当下市场上各种大小屏幕不一的终端，做到写一次各种终端大小的屏幕都能比例协调的显示。下面我们先来看下大家耳熟能详的几种方案是如何去解决屏幕适配的。

  1. rem/em：rem根元素字体大小单位，em元素字体大小单位。使用rem的时候我们需要在css中先为html元素设定font-size属性，其作为整个页面单位的元单位，这个大小要设置为多少呢？这要依据设计图和屏幕尺寸来决定，通常我们还需要使用js来优先判断当前要适配屏幕的大小，之后去动态的更改html中的font-size大小；而em这个单位和百分比相似，子类的大小受其父类控制，比如父类的font-size为16px，在子类中我们写0.5em极为8px，这样一级一级的嵌套写下来，最后我们要做也是通过js来判断当前要适配屏幕的尺寸，去更改最高层级上的font-size。

  2. 百分比：em玩腻了，换个新的玩法，而且在em使用中，如果适配器尺寸判断位置稍有不适，页面会出现顿闪，不适合新人玩，如果你现在要做一个撑满全屏幕的移动网站，那么最佳的选择方案莫过于百分比布局了。所以的尺寸都除以设计图的总宽高给定一个百分比即可。

  3. 响应式：响应式是pc和移动端一站式的解决方案，通过css3的媒体查询去判断当前终端的屏幕尺寸来决定当下要显示元素。

以上所有的方法都需要事先获知适配器当下的尺寸，百分比布局虽然不需要，但是他的优势更适合于做全屏铺满的网站，那有没有一种方案是直接相对于屏幕大小而言呢？毕竟我们最终目的也是屏幕适配，答案就是本问给大家推荐的css属性vw和vh--viewport width/height，视口的宽高，指代的是浏览器内部的可是区域的宽高，1vw等于视口宽度的1%，很明显这个单位是以视口也就是屏幕大小作为评估依据的，正合我们意，我们先来看他们的支持情况。

 

 

网友评论