通常移动端的布局方式
1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用
2、固定像素设固定视口宽度。
3、最费事的media query，根据设备视口宽度不同设置不同的样式，换句话说一个页面有多套样式。可以说是正宗的响应式布局。
常规的做法带来的苦恼
常规的这些做法总有一些缺陷是令人遗憾的：
1、rem和百分比布局，这种布局rem终归也是有极限的，当屏幕比较大时，页面元素就开始变得有那么一些不协调了。
2、设置固定的视口使用固定像素来做，那么问题又来了，假如你设置的是640px，那么就意味着最大在640的设备下能显示正常，一旦超出640的设备，就会出现一些地方布局出问题了，最关键还是存在一些兼容性的问题，安卓部分手机能够下滑，而实际下面根本没有任何东西，html的高度莫名其妙的多了很多。
3、media query，正常的来说这种做法是最好的，然而遗憾的是，它会大大增加UI的工作量，同时也大大增加你的工作量，因此不是哥不想用你，是哥真的没办法大量的用你啊。
另辟蹊径
在学习viewport的时候，我们就知道里面有scale这么个东西，有的时候就会想按比例缩放整个页面不就可以了？没错，今天我们要介绍的pageResponse其实就是通过缩放页面比例实现的，然而它修改的并不是viewport的scale而是利用CSS3 transform的scale属性，去缩放整个页面。
如何使用
pageResponse提供了三种模式：auto || contain || cover
auto模式下只对页面进行简单的比例缩放。
contain模式下会居中处理页面，使内容整屏显示。
cover模式下会将超出部分因此处理。
首先记得给页面加上viewport
再给页面加一个container，最后配置js即可：
// 使用方法
window.onload = window.onresize = function（）{
pageResponse（{
selector : '输入类名', //模块的类名（container的类名）
mode : 'contain', // 选择模式 auto || contain || cover
width : '320', //设计图的宽320px
height : '504', //设计图的高504px
origin : 'center center 0' //缩放中心点，可选，在contain和cover模式下无效，默认为"left top 0"
}）
}
有兴趣的可以看看源码，会发现其实也就是在捣鼓比例关系的问题，完全就是一个简单的数学问题。所以这里就不分析源码了。
通过这个框架关于比例失真的问题全部迎刃而解，然而解决一个问题的同时也会暴露出其他的问题，这个框架达到的效果会是你想要的效果吗？用户体验是你想要的吗？
结束语
移动端有很多做法，对于我来说之前提到的三种常用的方法我都用过，而他们经常是结合着用，单独的存在往往不能够满足需求，就拿一个简单的例子来说
main
footer
竖屏的时候你希望footer在底部，假如横屏的时候main区域已经占满屏幕了，这时候如果还按照原来的比例进行缩放，用户会划过相当长的一部分空内容区域然后再到达footer，这样用户体验非常不好，于是你需要合理的利用media query去调整横屏时footer的位置。移动端看似简单，布局上却有非常多的细节问题。因此多学多思考，学如逆水行舟，不进则退。希望大家能多对比多思考，方法总有优缺点，懂得如何互助互补才是关键。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
Java抽象类