前言

看了宇哥关于移动端适配的分享后，加上目前公司项目也需要做移动端适配，今天就抽空搞了搞。目前业界还是比较推崇手淘使用“rem+viewport”的解决方案，今天自己模仿手淘flexible的解决方案，实现了个简单的demo。

一句话总结

flexible动态获取设备宽度和dpr，为html元素添加两个属性：data-fontsize（设备宽度／10），data-dpr（安卓均为1，ios不同设备为2或3），同时设置meta标签的scale（1/dpr）。你只需要为需要适配的元素设置rem，为字体设置px（需要考虑不同的dpr）。

小demo

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<meta content="yes" name="apple-mobile-web-app-capable">

		<meta content="yes" name="apple-touch-fullscreen">

		<meta content="telephone=no,email=no" name="format-detection">

		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

		<link rel="apple-touch-icon" href="favicon.png">

		<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">

		<title>再来一波</title>

		<style type="text/css">

			.item-section{

				width: 10rem;

				margin: 0 auto;

			}

			img{

				width: 10rem;

			}

			[data-dpr="1"] .flag-title a{

				font-size: 14px;

			}

			[data-dpr="2"] .flag-title a{

				font-size: 28px;

			}

			[data-dpr="3"] .flag-title a{

				font-size: 42px;

			}

		</style>

	</head>

	<body>

		<div class="item-section" data-repeat="sections">

			<ul>

				<li data-repeat="items" class="flag" role="link" href="##">

					<a class="figure flag-item" href="##">

						<img src="https://placeimg.com/350/350/people/grayscale" alt="">

					</a>

					<div class="figcaption flag-item">

						<div class="flag-title"><a href="##" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装</a></div>

					</div>

				</li>

			</ul>

		</div>

	</body>

</html>

Flexible实现H5移动端适配小demo的更多相关文章

  1. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  2. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  3. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  4. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

  5. h5 移动端适配方案思考

    基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...

  6. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

  7. js+canvas(H5)实现小球移动小demo

    *canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...

  8. H5移动端手势密码组件

    项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...

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

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

随机推荐

  1. day59 pip安装django出错解决方案

    在虚拟环境下,输入 pipinstall django ==2.2,安装django,可能会出现超时问题 ​ 这里的报错是网络问题,解决方案有如下三种 (1)多试几次,网络好就装上了 (2)Cmd输入 ...

  2. Maven [ERROR] 不再支持源选项 5，请使用 7 或更高版本的解决办法

    刚刚学Maven,当我点击test时 就出现了这两个错误: [ERROR] 不再支持源选项 5.请使用 7 或更高版本.[ERROR] 不再支持目标选项 5.请使用 7 或更高版本. 后来在看到这篇文 ...

  3. java 面向对象（二十七）：注解的使用

    1. 注解的理解① jdk 5.0 新增的功能*② Annotation 其实就是代码里的特殊标记, 这些标记可以在编译, 类加载, 运行时被读取, 并执行相应的处理.通过使用 Annotation, ...

  4. 数据可视化之powerBI基础（十七）掌握PowerBI按列排序,再也不用担心顺序错乱了

    https://zhuanlan.zhihu.com/p/64421933 经常有朋友问,当把文本字段放到坐标轴或者切片器上,显示的顺序都乱了,完全不是自己想要的,就像下面这些, ↑月份坐标轴 ↑星期 ...

  5. 02 drf源码剖析之快速了解drf

    02 drf源码剖析之快速了解drf 目录 02 drf源码剖析之快速了解drf 1. 什么是drf 2. 安装 3. 使用 3. DRF的应用场景 1. 什么是drf drf是一个基于django开 ...

  6. 收集TCP端口的访问延迟和丢包率

    需求: 找一款工具可以对TCP 80端口 收集 访问延迟和丢包率 找到的工具: 1.Hping :  http://www.hping.org/ 2.paping : https://docs.azu ...

  7. HTML学习分享（一）

    HTML学习小结(一) 1.css的全称是什么? 2.样式表的组成 3.浏览器读取编译css的顺序? (1)HTML基本选择器 1.通配符选择器 * { margin: 0; padding: 0; ...

  8. Windows 磁盘分区后如何再合并&如何用Windows自带工具扩大某个分区

    Windows 磁盘分区后如何再合并&用Windows自带工具扩大某个分区 注:此方法有一定的成功率,更加完善可行的方法请看http://www.diskgenius.cn/help/part ...

  9. 食用Win系统自带的PowerShell登录服务器

    运行powershell输入ssh root@你的服务器ip -p你的端口 切换rm ~/.ssh/known_hosts cmd 运行 ping 你的ip -t一直ping ctrl+c停止 tra ...

  10. 【mysql】- 锁篇（上）

    回顾 问题 事务并发执行时可能带来各种问题,并发事务访问相同记录的情况大致可以划分为3种 读-读情况:即并发事务相继读取相同的记录 读取操作本身不会对记录有什么影响,并不会引起什么问题,所以允许这种情 ...