教你如何用 lib-flexible 实现移动端H5页面适配
前话
好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)")。
这是我的github,欢迎前端大大们和我一起学习交流
https://github.com/pwcong
最近入职公司做前端实习,这几个星期来学到了移动端H5页面适配。(以前根本没做过移动端网页/(ㄒoㄒ)/~~,还是微信端的)
所以把我学到的一个小知识点写下来,也分享给前端新手们。
正文
0x00 大概说明
做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。
很多时候UI给的设计图只有一份,还是按照iphone6设计的,这就让前端适配其他例如6plus或安卓等其他移动端头疼。
还好,阿里巴巴2015年底公开了其成熟的适配方案,lib-flexible
,至于其可靠性可参考每年天猫活动的移动端页面。
这个方案的用法大概是这样的,HTML 头部引入 lib-flexible
的样式和js库,容器或组件宽高主要使用单位 rem
,字体大小则不变仍然使用单位 px
。
还有一个约束是,因为只面向移动端,因此我们限制最外层包裹的div最大宽度为 640px
我这里只简单介绍怎么使用
lib-flexible
实现移动端适配,如果需要深入解释的知识,请阅读如下文章:
https://github.com/amfe/article/issues/17
0x01 引入 lib-flexible
最新的库文件可以到这里下载:
https://github.com/amfe/lib-flexible
clone 下来后在 build
目录下找到 flexible.css
和 flexible.js
在HTML头部引入即可,例如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>lib-flexible demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
...
<link href="css/flexible.css" rel="stylesheet">
<script src="js/flexible.js"></script>
</head>
<body>
...
</body>
</html>
0x02 计算rem
值
谷歌 rem
的用法后很多人应该大概了解 rem
的原理了,大概就是 rem
依赖 font-size
的值,例如默认下 1rem = 16px
,因此通过在不同分辨率修改 font-size
就可以达到适配不同分辨率的移动端了。
需要详细了解 rem 值计算可参考这篇文章 http://www.cnblogs.com/azhai-biubiubiu/p/6003597.html
rem
来做宽高定型有个最大的问题是,font-size
如何计算的问题,如何算得的 font-size
可以在不同分辨率下显示效果一致呢?
不用担心,lib-flexible
已经帮你算好了,在你调整窗口大小的时候自动计算调整 rem
的基准,你只要做的是,按照设计图算出能适配不同分辨率的移动端的 rem
值。
这里有个关系图:
看不懂没关系,看那么多flexible的教程都放了我也就跟着放出来好了。
假如UI给了这个设计图(找不到工作的UI (/▽\)):
好,我这辣鸡一眼看出了:
- 这是以iphone5为标准的ui设计稿,设备窗口宽度为
640px
- 中间一个色块,居中,背景色为
#0075a9
,margin-top 为100px
, width 为240px
,height 为120px
接下来,我们来计算rem值,计算公式很简单:
需转换的px值 / 设计稿宽度px值 * 10
上面的尺寸计算一下转换成下面的说法:
- 这是以iphone5为标准的ui设计稿,设备窗口宽度为
10rem
- 中间一个色块,居中,背景色为
#0075a9
,margin-top 为1.5625rem
, width 为3.75rem
,height 为1.875rem
0x03 按照找不到工作的UI给的设计稿敲出代码
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/flexible.css" rel="stylesheet">
<script src="js/flexible.js"></script>
<style>
html, body{
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
}
body{
background: #333;
}
.container{
overflow-x: hidden;
overflow-y: auto;
position: relative;
height: 100%;
max-width: 640px;
background-color: white;
margin: 0 auto;
}
.block{
margin: 0 auto;
margin-top: 1.5625rem;
width: 3.75rem;
height: 1.875rem;
background-color: #0075a9;
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
</div>
</body>
</html>
0x04 不同分辨率移动端下浏览效果
可以看到,在多个不同设备间,效果基本差不多
后话
也许你会说,我这个案例 内容太少,没有什么说服力。
那么,大佬们快动起手来,在你的移动端网页项目中用上 lib-flexible
看看能否解决移动端页面适配问题吧。
教你如何用 lib-flexible 实现移动端H5页面适配的更多相关文章
- 使用Flexible实现手淘H5页面的终端适配【转】
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 使用Flexible实现手淘H5页面的终端适配(转)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- (转)使用Flexible实现手淘H5页面的终端适配
原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...
- [转]使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 使用Flexible实现手淘H5页面的终端适配
拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...
- 移动端H5页面的最佳终端适配之Flexible
lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <s ...
- 使用Flexible 实现手淘H5 页面的终端适配学习
Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h ...
- 使用flexible适配移动端h5页面
flexible是淘宝提供的一套REM手机适配的库,用法也非常简单 首先,在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式),或者通过cdn方式引入 ...
- 使用Flexible适配移动端html页面 - demo记录
前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layou ...
随机推荐
- CentOS7配置更新国内yum源
备份本地yum源文件 cd /etc/yum.repo.d/ mv CentOS-Base.repo CentOS-Base.repo.bakeup 下载国内yum源 阿里云yum源 wget htt ...
- [译]移动API安全终极指南
文章主要讲了移动api调用的授权和验证问题,原文链接:The Ultimate Guide to Mobile API Security 移动API的使用是Stack Overflow和 Stormp ...
- python小小面试题
一.python是如何进行内存管理的?Python引入了一个机制:引用计数.python内部使用引用计数,来保持追踪内存中的对象,Python内部记录了对象有多少个引用,即引用计数,当对象被创建时就创 ...
- WebService--jax-spring集成
如果使用javax.jws内容编写webservice,则只能通过将程序打成jar包的形式运行,如果要想通过web容器进行发布,则需要使用其他webservice框架.下面介绍jaxws与spring ...
- 《Linux命令行与shell脚本编程大全》 第六章环境变量
很多程序和脚本都通过环境变量来获取系统信息.存储临时数据和配置信息. 6.1 什么是环境变量: bash shell用一个叫环境变量(environment variable)的特性来存储有关shel ...
- 使用 ConfigSource 特性 拆分 Web.config 文件
一个大项目里可能会有非常多个配置参数,有.Net自己支持的配置(比如WCF,AppSettings),还有一部分是自定义的配置(比如继承自ConfigurationSection和Configurat ...
- MSSQL 常用操作
0.GUID去除横线和变换为小写 SELECT LOWER(REPLACE(LTRIM(NEWID()),'-','')) 1.IDENTITY 函数说明 IDENTITY ( data_type [ ...
- C#多功能DataGridView打印类(WinForm)
; printPreviewDialog.ShowDialog(); } catch { ...
- python进阶------进程线程(五)
Python中的IO模型 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别 ...
- javascript第六章--BOM
① window对象 ② location对象 ③ navigator对象 ④ screen对象 ⑤ history对象