1.百分比布局  

这种适配方法非常死板  百分比布局常常会出现bug而且不容易做

2.固定宽度

把固定宽度固定起来，如果超出这些部分就留白，制作竖向拉伸，这种方式面对手机非常不错，或者某些app本身就有大量的留白，但是面对平板电脑的时候就很不方便了 ，平板电脑本身就有非比寻常的宽度。

3.响应式

根据不同的宽度设置不同的px，这种方式维护起来非常困难，很难做每个机型的适配，不能一步到位。

4.rem等比例适配所有屏幕

所谓一招鲜吃遍天，使用rem非常方便，只需要做一套就行，把页面转换成rem，然后按照rem的比例设置每个元素的大小，但是出现的问题就是页面太大很糊，页面太小看不见。

使用方法为：

1.先设置html元素的 font-size的大小   

2.设置的font-size大小的转换比例为   1rem = 1 font-size   如果设置font-size大小为30px  则 1rem = 30px

 动态设置rem的方法为：获取页面大小$(window).width()  然后按照页面大小设置rem