pageResponse 介绍
使用transform:scale缩放页面，要求视觉稿高清，页面以px为单位即可让h5适配各种移动设备，适配原则根据视觉稿比例缩放页面。告别rem、媒体查询、百分比等相对复杂且定位不精准的布局。
兼容性良好，支持ios4+、android2.3+、winphone8+系统。
约1k，零依赖。
三种适配模式可选 auto || contain || cover。
contain模式（推荐）
保持页面的宽高比，调整页面的宽度或高度（较大者），使页面完全包含在浏览器窗口中
页面水平垂直居中，左右或上下可能出现空白，页面背景使用纯色或可复制背景可解决此类问题
cover模式
保持页面的宽高比，调整页面的宽度或高度（较小者），使页面完全覆盖浏览器窗口
auto模式（默认模式）
保持页面的宽高比，调整页面的宽度，使页面宽度完全包含在浏览器窗口中
快速上手
Meta的viewport设置：
<Meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<div>
<img src="img/demo1.jpg" alt="" width="320" height="504">
<h1>你一定也有过一个翱翔天际的梦1</h1>
<p>- 回家，或踏上旅途，飞机是自由的符号 -</p>
</div>
//如果视觉稿尺寸是640px*1008px，页面样式是以视觉稿尺寸除以2来计算，那么输入页面的宽度为320px和高度为504px
window.onresize = function(){
pageResponse({
selectors : '.page',//模块选择器，使用querySelectorAll的方法
mode : 'contain',// auto || contain || cover
width : '320',//输入页面的宽度，只支持输入数值，默认宽度为320px
height : '504' //输入页面的高度，只支持输入数值，默认高度为504px
})
}
document.addEventListener("DOMContentLoaded",function() {
pageResponse({
selectors : '.page',//输入页面的宽度，只支持输入数值，默认宽度为320px
height : '504' //输入页面的高度，只支持输入数值，默认高度为504px
})
}
<!-- 2个模块（包含隐藏的）都包含class:page，pageResponse可对这2个模块起作用 -->
<div>
<img src="img/demo1.jpg" alt="" width="640" height="1008">
<h1>你一定也有过一个翱翔天际的梦1</h1>
<p>- 回家，或踏上旅途，飞机是自由的符号 -</p>
</div>
<div>
<p>是否还记得她</p>
<img src="img/logo.jpg" alt="" width="40" height="40">
</div>
//如果视觉稿尺寸是640px*1008px，页面样式是以视觉稿原始尺寸来计算，那么输入页面的宽度为640px和高度为1008px
window.onresize = function(){
pageResponse({
selectors : '.page',// auto || contain || cover
width : '640',//输入页面的宽度，只支持输入数值，默认宽度为320px
height : '1008' //输入页面的高度，只支持输入数值，默认高度为504px
})
}
document.addEventListener("DOMContentLoaded",//输入页面的宽度，只支持输入数值，默认宽度为320px
height : '1008' //输入页面的高度，只支持输入数值，默认高度为504px
})
}
GitHub:https://github.com/peunzhang/pageResponse
网站描述:移动端响应式插件
pageResponse
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。