前话

好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)"）。

这是我的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 (/▽＼)）：

好，我这辣鸡一眼看出了：

  1. 这是以iphone5为标准的ui设计稿，设备窗口宽度为 640px
  2. 中间一个色块，居中，背景色为 #0075a9，margin-top 为 100px， width 为 240px，height 为 120px

接下来，我们来计算rem值，计算公式很简单：

需转换的px值 / 设计稿宽度px值 * 10

上面的尺寸计算一下转换成下面的说法：

  1. 这是以iphone5为标准的ui设计稿，设备窗口宽度为 10rem
  2. 中间一个色块，居中，背景色为 #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页面适配的更多相关文章

  1. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  2. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  3. （转）使用Flexible实现手淘H5页面的终端适配

    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...

  4. [转]使用Flexible实现手淘H5页面的终端适配

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  5. 使用Flexible实现手淘H5页面的终端适配

    拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...

  6. 移动端H5页面的最佳终端适配之Flexible

    lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <s ...

  7. 使用Flexible 实现手淘H5 页面的终端适配学习

    Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h ...

  8. 使用flexible适配移动端h5页面

    flexible是淘宝提供的一套REM手机适配的库,用法也非常简单 首先,在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式),或者通过cdn方式引入 ...

  9. 使用Flexible适配移动端html页面 - demo记录

    前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layou ...

随机推荐

  1. Tickets

    Tickets Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  2. Pycharm，Python原生IDE?

    老套路,安装和使用(Win7x64.JDK神马滴早已装好). 1.安装 网上下下来后就这东西 Next D盘路径 我选择.我喜欢 开装 好慢,以后用光纤 O了 桌面小图标 2.使用 以管理员身份打开软 ...

  3. Postman参数化使用以及中文乱码问题解决

    1.参数化详解 准备工作,数据准备 2.使用csv文件时中文乱码可以通过使用txt文本,json文本改变调用json文件改变文件的编码格式解决 3:参数化数据调用的两种方式通过调用读取文件传入环境变量 ...

  4. Servlet 学习笔记

    Servlet 运行在服务器上的 java 类: Servlet 容器为 javaWeb 应用提供运行时环境,负责管理 servlet 和 jsp 生命周期,以及管理他们的共享数据. 现在我们知道了 ...

  5. Java 核心内容相关面试题【1】

    1.什么是 transient 变量? transient 变量是指不会被序列化的变量. 2.什么是同步(synchronization)? 在多线程环境中,同步是指控制多个线程访问共享资源的方式.没 ...

  6. C#中静态和非静态的区别

    今天下午面试,HR问道:C#中静态类或静态方法和非静态类静态方法有什么区别?我回答是静态的可以直接调用而非静态的需要实例化.HR说这谁都知道,我问的是本质区别.我当时就郁闷了,我只有8个月的编程经验, ...

  7. robotframework自动化系列：删除操作流程以及总结

    之前已经完成了登录.新增和修改的操作流程,这一节主要说明删除操作流程以及自动化的过程中出现的问题,算是对这个项目自动化的一个总结. 删除操作流程 对于系统账号管理中删除功能,删除的测试点主要如图所示 ...

  8. sqli-libs

    这是抄袭你们  铃兰师姐总结的,尽管她很不情愿. (现在只是第八关,相信她会努力的,一定会做完,我也会随时在这个上面更新的,这个是在本地搭建的,想要这个的可以找你们铃兰师姐要啊!!!) less-1: ...

  9. Entity Framework Core 使用HiLo生成主键

    #cnblogs_post_body.cnblogs-markdown p img { max-width: 95%; } HiLo是在NHiernate中生成主键的一种方式,不过现在我们可以在Ent ...

  10. 以太坊客户端Geth命令用法-参数详解

    Geth在以太坊智能合约开发中最常用的工具(必备开发工具),一个多用途的命令行工具. 熟悉Geth可以让我们有更好的效率,大家可收藏起来作为Geth命令用法手册. 本文主要是对geth help的翻译 ...