pageResponse - 移动端适配框架
HTML5学堂:移动端布局一直都是一个问题,各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。
通常移动端的布局方式
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
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
再给页面加一个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的位置。移动端看似简单,布局上却有非常多的细节问题。因此多学多思考,学如逆水行舟,不进则退。希望大家能多对比多思考,方法总有优缺点,懂得如何互助互补才是关键。
案例和资源
详细案例和js下载,可查看文章——>pageResponse - 让H5适配移动设备全家,小编在书写本文时也查看了这篇文章,感觉还是可以的,也很感谢该作者的分享。
本文章共耗时4小时,责任小编:HTML5学堂-其其。
欢迎沟通交流~HTML5学堂
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 手把手教你搭建分布式项目环境
- GraphQL两年实战避坑经验
- 基于Dubbo的服务提供者与消费者的发布(在虚拟机中)以及使用nginx对项目进行负载均衡优化
- 我们为什么不使用CSS框架
- java.lang.IllegalArgumentException: node to traverse cannot be null!
- Spring Data Jpa 异常:PropertyReferenceException: No property xxx found for type for type yyy
- Spring全家桶之SpringData——SpringData Redis(附相关jar包)
- Spring全家桶之SpringBoot——初级阶段
- Spring全家桶之SpringBoot——高级阶段
- feign.FeignException$MethodNotAllowed: status 405 reading xxx#yyy(Integer)
- No serializer found for class 类名 and no properties discovered to create BeanSerializer
- 三步让你在Linux中发布SpringCloud项目
- 【赵渝强老师】MySQL高可用架构:MHA
- Python终极调试指南
- Spring全家桶之SpringCloud——高级阶段(上)