Flexible实现H5移动端适配小demo
前言
看了宇哥关于移动端适配的分享后，加上目前公司项目也需要做移动端适配，今天就抽空搞了搞。目前业界还是比较推崇手淘使用“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的更多相关文章
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- H5 PWA技术以及小demo
H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- h5 移动端适配方案思考
基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...
- H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...
- js+canvas(H5)实现小球移动小demo
*canvas提供画布,大小自定义,js得到画布,从画布对象通过getContext('2d')来得到画笔,然后就可以开始画了 代码: <!DOCTYPE html> <html l ...
- H5移动端手势密码组件
项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...
- 使用Flexible适配移动端html页面 - demo记录
前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layou ...
随机推荐
- day42 io模型
目录 一.io模型简介 二.阻塞io阻塞IO模型图.png 三.非阻塞io 四.io多路复用 五.异步io 一.io模型简介 Stevens在文章中一共比较了五种IO Model: blocking ...
- 二、python 中五种常用的数据类型
一.字符串 单引号定义: str1 = 'hello' 双引号定义: str1 = "hello" 三引号定义:""" 人生苦短, 我用python! ...
- redis（六)：Redis 字符串(String)
Redis 字符串数据类型的相关命令用于管理 redis 字符串值,基本语法如下: 语法 redis 127.0.0.1:6379> COMMAND KEY_NAME 实例 redis 127. ...
- A Great Alchemist 最详细的解题报告
题目来源:A Great Alchemist A Great Alchemist Time limit : 2sec / Stack limit : 256MB / Memory limit : 25 ...
- 微信小程序热更新，小程序提示版本更新，版本迭代，强制更新，微信小程序版本迭代
相信很多人在做小程序的时候都会有迭代每当版本迭代的时候之前老版本的一些方法或者显示就不够用了这就需要用到小程序的热更新.或者说是提示升级小程序版本 editionUpdate:function(){ ...
- Dynamics CRM Audit Performance Troubleshooting
记一次Dynamics CRM Audit 查询失败的问题. 客户环境现象:由于业务逻辑需要使用RetrieveAuditDetailRequest API查询相关Record的详细更改信息.但查询过 ...
- bzoj1680[Usaco2005 Mar]Yogurt factory*&&bzoj1740[Usaco2005 mar]Yogurt factory 奶酪工厂*
bzoj1680[Usaco2005 Mar]Yogurt factory bzoj1740[Usaco2005 mar]Yogurt factory 奶酪工厂 题意: n个月,每月有一个酸奶需求量( ...
- Tips1：考虑用静态工厂方法代替构造器
用静态工厂方法来代替构造器为外界提供对象 描述: 静态工厂方法代替构造器来给外界提供对象,创建对象依然是由构造器来完成的 创建对象和提供对象: 创建对象的方式: 构造器 提供对象来哦方式: 构造器 类 ...
- 互联网的寒冬下各大一线互联网公司还在用SpringBoot这是为什么？
引言 现在各大技术社区 Spring Boot 的文章越来越多,Spring Boot 相关的图文.视频教程越来越多,使用 Spring Boot 的互联网公司也越来越多: Java 程序员现在出去面 ...
- OSCP Learning Notes - WebApp Exploitation(4)
Local File Inclusion[LFI] Target Pentester Lab: Download from the following website: https://www.vul ...