教你如何用 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
值。

这里有个关系图:

demo2

看不懂没关系,看那么多flexible的教程都放了我也就跟着放出来好了。

假如UI给了这个设计图(找不到工作的UI (/▽\)):
demo1

好,我这辣鸡一眼看出了:

  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 不同分辨率移动端下浏览效果

dev1

dev2

dev3

dev4

可以看到,在多个不同设备间,效果基本差不多


后话

也许你会说,我这个案例 内容太少,没有什么说服力

那么,大佬们快动起手来,在你的移动端网页项目中用上

lib-flexible
看看能否解决移动端页面适配问题吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369379.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用GlassFish 3.1.2.2和Primefaces 3.4的JDBC领域和基于表单的身份验证

我的博客上最受欢迎的帖子之一是有关JDBC安全领域和带有Primefaces的GlassFish上基于表单的身份验证的简短教程。 在收到有关它不再适用于最新的GlassFish 3.1.2.2的评论后&#xff0c;我认为可能是时候重新访问它并提出更新的版本了。 开始了&#xff1a; 制备 就像在原始教程…

thinkcmf常用标签

1、图片地址&#xff1a;{:cmf_get_image_url($vo.icon)} 2、模板控件 模板变量调用&#xff1a;$theme_vars.title <widget name"aboutUs">{$widget.title} //控件标题 {$widget.vars.subTitle} //控件变量 subTitle {:nl2br($widget.vars.content)} //输…

ubuntu下docker安装,配置python运行环境

参考自: 1.最详细ubuntu安装docker教程 2.使用docker搭建python环境 首先假设已经安装了docker&#xff0c;卸载原来的docker 在命令行中运行&#xff1a; sudo apt-get updatesudo apt-get remove docker docker-engine docker.io containerd runc 安装docker依赖 apt-get…

python 打造一个sql注入脚本 (一)

0x00前言&#xff1a; 昨天刚刚看完小迪老师的sql注入篇的第一章 所以有了新的笔记。 0x01笔记&#xff1a; sql注入原理&#xff1a; 网站数据传输中&#xff0c;接受变量传递的值未进行过滤&#xff0c;导致直接带入数据库查询执行的操作。 sql注入对渗透的作用&#xff1a; …

如何给VirtualBox虚拟机的ubuntu LVM分区扩容

我在VirtualBox安装的ubuntu里安装Cloud Foundry时遇到错误信息&#xff0c;磁盘空间不够了&#xff1a; 使用这三个命令做了清理之后&#xff0c;结果依然不够理想&#xff1a; (1) sudo apt-get autoclean&#xff08;已卸载软件的安装包&#xff09; (2) sudo apt-get clean…

您好GroovyFX

GroovyFX汇集了我最喜欢的两件事&#xff1a; Groovy和JavaFX 。 GroovyFX项目主页面将GroovyFX描述为“ [为JavaFX 2.0提供Groovy绑定”。 该页面上进一步描述了GroovyFX&#xff1a; GroovyFX是一个API&#xff0c;它使在Groovy中使用JavaFX变得更加简单和自然。 GroovyFX专…

calc() ---一个会计算的css属性

最近这个月一直在赶项目开发&#xff0c;遇到的问题和学到的前端知识没有更新到博客园&#xff0c;现在闲了下来&#xff0c;就整理一下前端知识。  在项目开发中&#xff0c;在样式这方面花费的时间较多&#xff0c;因为针对于数字的变化特别多&#xff0c;本人不爱记数字&a…

HashMap实现原理及源码分析

HashMap实现原理及源码分析 哈希表&#xff08;hash table&#xff09;也叫散列表&#xff0c;是一种非常重要的数据结构&#xff0c;应用场景及其丰富&#xff0c;许多缓存技术&#xff08;比如memcached&#xff09;的核心其实就是在内存中维护一张大的哈希表&#xff0c;而H…

使用NetBeans Lambda支持在Java 8中使用Lambda表达式对列表进行排序

作为JSR 335的一部分&#xff0c; Lambda表达式已从Java 8开始引入Java语言&#xff0c;这是Java语言的一个重大变化。 如果您想了解更多关于Lambda表达式以及JSR 335的信息&#xff0c;可以访问以下资源&#xff1a; 在OpenJDK上的Lambda项目 。 Lambda常见问题解答 。 另一…

qq物联网 android sdk,物联网在腾讯:QQ物联

原标题&#xff1a;物联网在腾讯&#xff1a;QQ物联在物联网方面的一些产品&#xff0c;作为BAT三巨头之一&#xff0c;腾讯自然不能落后。本文就介绍一下腾讯的物联网平台&#xff0c;QQ物联。QQ物联&#xff1a;让每个设备成为一个QQ好友QQ物联的最大特点&#xff0c;就是让每…

Vue-cli 搭建项目

Vue框架学习--使用 vue-cli 搭建项目vue-cli 是一个官方发布 vue.js 项目脚手架&#xff0c;使用 vue-cli 可以快速创建 vue 项目&#xff0c;GitHub地址是&#xff1a;https://github.com/vuejs/vue-cli一、安装node.js 首先需要安装node环境(必须)&#xff0c;可以直接到中文…

HTML音乐标签和滚动

<!-- 音乐标签 --><embed src"1.mp3" type""><embed src"1.mp3" type"" hidden"true"> <!-- 滚动 --><marquee behavior"alternate" >gun</marquee><marquee behavior&qu…

响应式框架Bootstrap栅格系统

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一些辅助类&#xff0c;以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备&#xff0c;实现内容对设备的显示和隐…

int定义源码 python_python学习(第一章)

1.print输出语句# 输出字符串 print(hello) # 输出数字 print(234) print("I come from China") print("I come from China") # 输出表达式 print(71) # 将数据输出到文件中 file fp open(D:/pythoncode.txt, a) print("I come from China",…

使用Specs2和客户端API 2.0进行富有表现力的JAX-RS集成测试

毫无疑问&#xff0c; JAX-RS是一项杰出的技术。 即将发布的规范JAX-RS 2.0带来了更多的强大功能&#xff0c;尤其是在客户端API方面。 今天的帖子的主题是JAX-RS服务的集成测试。 有很多出色的测试框架&#xff0c;例如REST可以确保提供帮助&#xff0c;但是我要展示的方式是使…

python web开发-flask访问请求数据request

Request对象在web应用的开发中是一个非常重要的对象&#xff0c;主要用来获取用户发来的请求数据。 常用属性参考&#xff1a;http://docs.jinkan.org/docs/flask/api.html#flask.request 下面我们以一个表单提交的例子来说明一些常用request属性的使用。 创建一个表单的templa…

Showplan 逻辑运算符和物理运算符参考

本文档已存档&#xff0c;并且将不进行维护。运算符说明了 SQL Server 如何执行查询或数据操作语言 (DML) 语句。 查询优化器使用运算符生成查询计划&#xff0c;以创建在查询中指定的结果或执行在 DML 语句中指定的操作。 查询计划是由物理运算符组成的一个树。 您可以使用 SE…

在win10中通过Anaconda3安装tensorflow

安装Anaconda3&#xff0c;然后在所有程序中启动“Anaconda Navigator”&#xff0c;如图&#xff1a; 切换到“Enviroments"(环境)中&#xff0c;在右边有个显示环境的列表&#xff0c;默认有"base(root)"&#xff0c;然后单击底部的”Create"按钮创建一个…

功能接口简介–在Java 8中重新创建的概念

世界各地的所有Java开发人员都将至少使用以下接口之一&#xff1a;java.lang.Runnable&#xff0c;java.awt.event.ActionListener&#xff0c;java.util.Comparator&#xff0c;java.util.concurrent.Callable。 声明的接口之间有一些共同的特征&#xff0c;该特征是它们在接口…

计算机专业学生求职信500字,计算机专业求职信500字范文

计算机专业求职信500字范文尊敬的领导&#xff1a;您好&#xff01;请恕打扰&#xff0c;我是荆楚理工学院计算机工程学院的一个大学生&#xff0c;即将面临毕业.我很荣幸有机回向您呈上我的个人资料.在投身社会之际,为了找到符合自己专业和兴趣的工作,更好地发挥自己的才能,实…