page响应-移动端匹配框架
HTML5学堂：移动端布局一直是个问题，不同分辨率的移动端布局需要大量时间。 今天，我们将向大家介绍一个框架pageResponse.js，以防止页面在各种分辨率的手机上完全崩溃。
开发手记：使用swiper和pageResponse.js构建移动页面时，如果嵌套了更多的层次，在安卓手机中是极其卡顿的。 —— HTML5学堂小编：其
开发手记：微信有热情的读者反馈，引入三层会导致微信页面崩溃，不要应用太多层。 —— HTML5学堂小编：堡垒
开发手记：经过一段时间，我发现对于布局、功能简单的页面，这个框架很好。 但是，比较复杂的页面很快就会变成“坑”，所以相对比较复杂，所以不推荐~！ 复杂的页面不建议使用此框架。 复杂的页面不建议使用此框架。 复杂的页面不建议使用此框架。 (要事说三遍) ——HTML5学堂小编)其2016.02.29
通常是移动端布局方式
1、rem布局通过动态设置根目录下的font-size实现元素尺寸的“适配”，通常与百分比布局一起使用
2、固定像素固定视口宽度。
3、最费事的媒体查询根据设备视口的宽度设置不同的样式。 换句话说，一页有多种样式。 可以说是正式的响应布局。
由通常的做法引起的苦恼
很遗憾，这些常规做法有一些缺点。
1、rem和百分比布局，这个布局rem毕竟也是有限的，屏幕大了，页面元素就会开始有那么大的违和感。
2、设置固定视口并使用固定像素进行操作时，还会出现问题。 如果你安装了640px，意味着最多可以在640个设备上正常显示。 超过640个设备会导致一些地方的布局出现问题。 最重要的是有兼容性问题。 有些安卓手机可以掉下来，但实际下面什么都没有。 html的高度令人费解。
3、media query，一般来说这个做法是最好的，但很遗憾，它会大大增加UI的工作量，同时也会大大增加你的工作量。 因此，不是哥哥不想用你，而是哥哥真的不能大量使用你。
开辟新的道路
在学习视口时，我们知道里面有类似scale的东西，有时我们可能需要按比例缩放整个页面。 没错，今天介绍的pageResponse其实是通过更改页面的比例来实现的。 但是，它已更改为使用css3变换的scale属性，而不是viewport的scale，以缩放整个页面。
怎么用
pageResponse有三种模式：自动。
在自动模式下，页面的比例会简单地更改。
在contain模式下，页面居中，内容显示在整个屏幕上。
在cover模式下，将处理超出部分。
首先，请记住在页面上添加viewport
向页面添加容器，最后配置js即可：
//使用方法
window.onload=window.onresize=function {
page响应({ (
输入selector : '类名'，//模块的类名(container的类名)
mode : 'contain '，//选择模式自动||contain |
width : '320 '，//设计图宽320px
height : '504 '，//设计图高504px
origin : 'center center 0' //比例中心点，选项，在contain和cover模式下无效，默认值为' left top 0'
() )
}
感兴趣的人看看源代码，就会发现其实是摆比例关系的问题，是一个完全简单的数学问题。 所以这里不分析源代码。
这个框架可以解决所有关于比例失真的问题，但在解决一个问题的同时也会暴露出其他问题。 这个框架能达到的效果是你想要的效果吗？ 用户体验是你想要的吗？
结束语
移动终端有很多做法。 对我来说，我用过前面提到的三种常用方法，他们经常组合使用。 单独存在往往不能满足需要。 举个简单的例子吧
主要的
福斯特
对于垂直屏幕，我希望footer位于底部。 对于水平屏幕，主区域已满屏幕。 此时，如果按原始比例缩放，用户将在到达footer之前穿过相当长的空闲内容区域。 这种情况下的用户体验非常差，因此需要利用媒体查询来调整横向屏幕上的footer位置。 移动终端看起来很简单，但在布局上有很多细节问题。 所以学多，想多，学逆水行舟，不进则退。 希望你能多加比较和思考，知道方法有优缺点，知道如何互相帮助，互相补充是很重要的。
案例和资源
详细情况和js下载将使文章——页面响应-适合移动设备家族。 小编写这篇报道的时候也检查过这篇报道，感觉还不错，谢谢这位作者的分享。
这篇文章一共花了四个小时，责任小编： HTML5学堂-其。
欢迎交流~HTML5学堂