转载请注明出处：http://blog.csdn.net/lishihong108/article/details/52290021

#前言 　　大家都知道当下，手机屏幕大小多种多样，而且即使同样大小的size，每个手机的设备像素比还不一样。当我们选用html5来开发移动应用的时候，有没有一种合适的方案来完美的适配到所有的屏幕呢？ 对移动端接触不多的，可以先了解下移动端的单位、viewport的概念。这里也不再赘述，通过以下连接了解。 1.http://www.cnblogs.com/2050/p/3877280.html　　2.http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml #经典方式

先简要的介绍下现在多数开发者使用的方式，由于这些方式大家或多或少都使用过，而且网上也有非常详细的教程，我就不再重复造轮子，只是简单的列举下。 1.css3 @media

http://www.w3cways.com/1180.html 这种方式适配起来良好，但是还是无法兼容所有的屏幕，而且各个样式都用@media写几套，很麻烦，也不利于后期扩展维护。

2.px+百分百+flex

像目前接触过的一些前端框架ionic、bootstrap、amaze、mui等，对于已经确定无需随屏幕变化的元素，一般用px固定大小，对于宽度的处理用百分比或flex来灵活处理。

这种方式处理起来，大体还好，但是对于小屏iphone5s和大屏iphone6 plus，某些布局只能折中处理。最大的缺陷是， 一些布局无法通过百分比或者flex设置的时候，布局的样式和字体的大小都无法随屏幕的变化而响应式变化。

3.对于viewport的处理