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官方网站
官方网站:
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。