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学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

两行 CSS 代码实现图片任意颜色赋色技术

1313
来自专栏IMWeb前端团队

Front-End MV*简述(一)

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 近几年来由于web应用的交互越来越复杂,前端技术也迎来了一个飞速发展的时期。...

16510
来自专栏顶级程序员

单页应用(SPA)开发中的 Top 10 框架

要用原生 JavaScript 开发 web 应用 ? 呵呵哒!现在都追求开发效率,开发者需要要更高效的方式,于是 JavaScript 框架诞生了。JavaS...

3254
来自专栏张善友的专栏

Dynamic Language Runtime 微软打出的王牌

      Dynamic Language Runtime(DLR)。DLR和IronPython全部开源,如果你微软这样的动作吃惊,请看看Microsoft...

18410
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

1725
来自专栏MixLab科技+设计实验室

谈设计与技术,以WEB布局为例

本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

2757
来自专栏IMWeb前端团队

【同行说技术】致前端:react开发的5个资源合集

本文作者:IMWeb seagirl 原文出处:IMWeb社区 未经同意,禁止转载 ? 现在最热门的前端框架,毫无疑问是React。在基于React的...

1848
来自专栏MelonTeam专栏

iOS上直播弹幕的一种实现

一、弹幕简介 所谓弹幕,就是评论的一种表现形式,更能吸引用户眼球,增强用户体验,增加用户参与感和使用粘度。用户可以在观看内容(视频为主)的同时查看其他人对这个...

2626
来自专栏前端架构与工程

《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天:人生若只如初见简单记录了笔者初...

2018
来自专栏中国Android研究院

是时候学习Flutter了

Flutter是谷歌在2018年2月份的谷歌IO大会上推出的一款跨平台的UI框架,可以快速的在Android和IOS平台上构建高质量的原生用户界面。可以与你现有...

653

扫描关注云+社区