pageResponse.js - 让H5适配移动设备全家(移动端适配)
2016-08-11 18:05
351 查看
是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的尺寸,一套是窄屏手机(如iPhone4),另一套是宽屏手机(如iPhone5),这样的好处不仅减少重构页面的适配成本外,也在页面展现上提升页面的用户体验。
然而不管是设计2套还是3套以上的视觉稿来辅助前端来完成页面,最终还是会抵挡不住设备更新换代带来的适配问题,移动设备不断从低分辨率到高分辨率过渡,不同分辨率尺寸差异越来越大,适配越来越头疼。
亲,你还在为以上事情烦恼吗?来~请使用新鲜出炉的pageResponse.js,一套视觉稿适配移动设备全家,让烦恼通通见鬼去!!!
github地址
真实案例
contain模式(推荐)
cover模式
auto模式(默认模式)
结合fullPage滑屏框架的例子
快速上手
页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面
兼容性良好,支持ios4+、android2.3+、winphone8+系统
大小1k,零依赖
三种适配模式可选 auto || contain || cover
适用性
* 非常适合专题landing页
* 页面内容一般为几张图片拼接
* 同时要适配移动端和PC端
* 要自适应宽度
* (绝对)定位元素仅需使用px单位即可适配
* 切图时仅需切640宽(可以配置)的图片
* 即使内容很长, 换行也需要正确
页面水平垂直居中,左右或上下可能出现空白,页面背景使用纯色或可复制背景可解决此类问题
适合滑屏页面、单屏页面
预览
页面水平垂直居中,超出浏览器窗口左右或上下的内容会被隐藏
适合滑屏页面、单屏页面,且页面边缘无重要内容
预览
预览
启用插件代码示例一:
启用插件代码示例二:
demo下载
然而不管是设计2套还是3套以上的视觉稿来辅助前端来完成页面,最终还是会抵挡不住设备更新换代带来的适配问题,移动设备不断从低分辨率到高分辨率过渡,不同分辨率尺寸差异越来越大,适配越来越头疼。
亲,你还在为以上事情烦恼吗?来~请使用新鲜出炉的pageResponse.js,一套视觉稿适配移动设备全家,让烦恼通通见鬼去!!!
目录(更新于20151013)
原理及说明github地址
真实案例
contain模式(推荐)
cover模式
auto模式(默认模式)
结合fullPage滑屏框架的例子
快速上手
原理及说明
使用transform:scale缩放页面,要求视觉稿高清页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面
兼容性良好,支持ios4+、android2.3+、winphone8+系统
大小1k,零依赖
三种适配模式可选 auto || contain || cover
适用性
* 非常适合专题landing页
* 页面内容一般为几张图片拼接
* 同时要适配移动端和PC端
* 要自适应宽度
* (绝对)定位元素仅需使用px单位即可适配
* 切图时仅需切640宽(可以配置)的图片
* 即使内容很长, 换行也需要正确
github地址
https://github.com/peunzhang/pageResponse真实案例
不同手机看效果,同一手机切换横竖屏看效果contain模式(推荐)
保持页面的宽高比,调整页面的宽度或高度(较大者),使页面完全包含在浏览器窗口中页面水平垂直居中,左右或上下可能出现空白,页面背景使用纯色或可复制背景可解决此类问题
适合滑屏页面、单屏页面
预览
cover模式
保持页面的宽高比,调整页面的宽度或高度(较小者),使页面完全覆盖浏览器窗口页面水平垂直居中,超出浏览器窗口左右或上下的内容会被隐藏
适合滑屏页面、单屏页面,且页面边缘无重要内容
预览
auto模式(默认模式)
保持页面的宽高比,调整页面的宽度,使页面宽度完全包含在浏览器窗口中预览
结合fullPage滑屏框架的例子
预览快速上手
meta的viewport设置:<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
启用插件代码示例一:
<div class="page"> <img src="img/demo1.jpg" alt="" width="320" height="504"> <h1>你一定也有过一个翱翔天际的梦1</h1> <p>- 回家,或踏上旅途,飞机是自由的符号 -</p> </div>
//视觉稿尺寸是640px*1008px,页面样式是以视觉稿尺寸除以2来计算,那么输入页面的宽度为320px和高度为504px window.onload = window.onresize = function(){ pageResponse({ selectors: '.page', //模块的类名,使用class来控制页面上的模块(1个或多个) mode : 'contain', // auto || contain || cover width : '320', //输入页面的宽度,只支持输入数值,默认宽度为320px height : '504' //输入页面的高度,只支持输入数值,默认高度为504px }) }
启用插件代码示例二:
<!-- 2个模块(包含隐藏的)都包含class:page,pageResponse可对这2个模块起作用 --> <div class="page"> <img src="img/demo1.jpg" alt="" width="640" height="1008"> <h1>你一定也有过一个翱翔天际的梦1</h1> <p>- 回家,或踏上旅途,飞机是自由的符号 -</p> </div> <div class="page hide"> <p>是否还记得她</p> <img src="img/logo.jpg" alt="" width="40" height="40"> </div>
//视觉稿尺寸是640px*1008px,页面样式是以视觉稿原始尺寸来计算,那么输入页面的宽度为640px和高度为1008px window.onload = window.onresize = function(){ pageResponse({ selectors: '.page', //模块的类名,使用class来控制页面上的模块(1个或多个) mode : 'contain', // auto || contain || cover width : '640', //输入页面的宽度,只支持输入数值,默认宽度为320px height : '1008' //输入页面的高度,只支持输入数值,默认高度为504px }) }
demo下载
相关文章推荐
- Ubuntu Touch 升级即将来袭!
- div+CSS 兼容小摘
- JAVASCRIPT IE 与 FF 中兼容写法记录
- CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
- 兼容各个浏览器的技巧
- js更优雅的兼容
- IE和Firefox下javascript的兼容写法小结
- IE与FireFox的JavaScript兼容问题解决办法
- 基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
- bootstrap3 兼容IE8浏览器!
- JAVASCRIPT IE 与 FF中兼容问题小结
- jQuery浏览器CSS3特写兼容实例
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- setTimeout函数兼容各主流浏览器运行执行效果实例
- JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
- 纯JavaScript实现的兼容各浏览器的添加和移除事件封装
- 更优雅的事件触发兼容
- 编写兼容IE和FireFox的脚本
- Javascript 多浏览器兼容总结(实战经验)