1.引入 阿里cdm文件,也可以自己下载下来引用，不需要在添加<meta name="viewport"">标签了

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

2.运行后会发现头部添加了dpr和fontsize属性

<html data-dpr="2" style="font-size: 75px;"><head>

3.假如现在给设计师基于750设计的稿上有一个200×80的logo,那么使用rem设置的话分别就是 200/75（也就是根字体的大小）和80/75rem

<div style="width: 2.666rem;height: 1.066rem;background: red;"></div>

淘宝适配 flexible.js的更多相关文章

  1. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  2. 移动端适配flexible.js

    npm install lib-flexible --save npm install px2rem-loader --save-dev

  3. nginx css,js合并插件，淘宝nginx合并js，css插件

    先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config  ngx_http_concat_ ...

  4. 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面

    由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...

  5. 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

  6. selenium 淘宝登入反爬虫解决方案（亲测有效）

    前言 目前在对淘宝进行数据爬取的时候都会碰到,登入时的滑块问题,无论是手动还是脚本都不成功.这里的很重要一个原因是很多的网站都对selenium做了反爬虫机制.接下来是笔者参考网上的网友们的方法亲自测 ...

  7. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  8. 手淘移动适配方案flexible.js兼容bug处理

    什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的 ...

  9. rem适配布局（rem+less+媒体查询 和 rem+flexible.js）

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

随机推荐

  1. Mybaits 源码解析 （十二）----- Mybatis的事务如何被Spring管理？Mybatis和Spring事务中用的Connection是同一个吗？

    不知道一些同学有没有这种疑问,为什么Mybtis中要配置dataSource,Spring的事务中也要配置dataSource?那么Mybatis和Spring事务中用的Connection是同一个吗 ...

  2. 小白学 Python（21）：生成器基础

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  3. python_day3（文件处理）

    1.文件处理 #Author:Elson Zeng #data = open("test").read() # f = open("test",'a',enco ...

  4. 生活问题 | 对华为畅玩手机5X进行升级

    步骤一:准备一张SD卡,建议使用Sandisk, Kingstone, 或Kingmax,大小建议在2G KIW-AL10C00B258 软件版本升级指导书 Secret  2016-11-25 Hu ...

  5. 创建linux系统下的虚拟机

    1.打开VMware软件 2.创建新的虚拟机 3.下一步 4.点击 稍后安装操作系统——下一步 5.选择   其中版本 我的镜像是这个版本所以选择这个 6.下一步  设置虚拟机名称  要保存的位置 7 ...

  6. java笔试面试第二天

    没想到第二次面试到了第二周,也是我在上海找工作的第二周,说实话,没有真本事找工作是真的难,虽然正在召开的十九大上,大大们纷纷表态国力正盛,经济稳步增长,就业压力逐渐缓解,但是社会终究是社会,要么靠实力 ...

  7. go-micro+php+consul简单的微服实现

    首先我们用go-micro构建一个服务.(关于go-micro的使用可以参照官方实例或者文档) //新建一个微服务 micro new --type "srv" user-srv ...

  8. [增强for循环] 格式

    比如:

  9. 一、netcore跨平台之 Linux上部署netcore和webapi

    这几天闲着的时候在linux上部署了一下netcore webapi,下面就纪要一下这个过程. 中间遇到不少的坑,心里都是泪啊. 话不多说,开始干活. ------------------------ ...

  10. node后台初始配置（2）

    一.node-app结构 创建成功node-app项目后,会自动生成一些文件一般初始的结构如下图 在bin文件夹里面只有一个文件www      var port = normalizePort(pr ...