参考文档:

http://blog.csdn.net/xwqqq/article/details/54862279

https://github.com/amfe/lib-flexible/tree/master

http://blog.csdn.net/ful1021/article/details/9321207

https://mp.weixin.qq.com/s/DpLXJhfCHsgrbgbuk25Ekw

head设置 meta和js:

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />

rem单位=设计稿尺寸/100

  1. var designWidth = 640, rem2px = 100;
  2. var d = window.document.createElement('div');
  3. d.style.width = '1rem';
  4. d.style.display = "none";
  5. var head = window.document.getElementsByTagName('head')[0];
  6. head.appendChild(d);
  7. var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
  8. d.remove();
  9. document.documentElement.style.fontSize =
  10. window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';

  

手机端rem无限适配的更多相关文章

  1. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

  2. 手机端rem如何适配_rem详解及使用方法2

    作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...

  3. 手机端rem简单配置相关

    手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...

  4. (淘宝无限适配)手机端rem布局详解(转载非原创)

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  5. (淘宝无限适配)手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  6. 移动端适配(手机端rem布局详解)

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

  7. 手机端rem自适应布局实例

    首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px:<script>        (function (doc, ...

  8. 手机端rem适应

    这段时间做了几个手机版的项目,因为没有用框架,所以用rem来做适应,下面就分享一下 //第一种是比较简单的代码 (function(win) { resizeRoot(); function resi ...

  9. 手机端rem 用法

    !function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange" ...

随机推荐

  1. dockerhub下载加速

    curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f5dad4ec.m.daocloud.io syste ...

  2. Python 通过lxml 解析html页面自动组合xpath实例

    #coding:utf-8 ''' @author: li.liu ''' from selenium import webdriver from selenium.webdriver.common. ...

  3. JQuery系列(3) - 工具方法

    jQuery函数库提供了一个jQuery对象(简写为$),这个对象本身是一个构造函数,可以用来生成jQuery对象的实例.有了实例以后,就可以调用许多针对实例的方法,它们定义jQuery.protot ...

  4. java 第11次作业

    题目1:编写一个应用程序,统计输入的一个字符串中相同字符的个数,并将统计结果输出. 代码 import java.util.*; public class Test { public static v ...

  5. 四行公式推完神经网络BP

    据说多推推公式可以防止老年痴呆,(●ˇ∀ˇ●) 偶尔翻到我N年前第一次推导神经网络的博客居然四页纸,感慨毅力! http://blog.sina.com.cn/s/blog_1442877660102 ...

  6. 10.31-11.1Test(未完)

    10.31-11.1Test 题目 描述 做法 \(BSOJ5177\) 求在\(n\)个数里选\(K\)个的所有方案的异或和之和 按位讨论,组合数算 \(BSOJ5178\) 化简\(\displa ...

  7. js 符号转换 html代码

    S转换HTML转义符 //去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+?>/g,''); ...

  8. Jmeter 正则表达式提取器详解(Regular Expression Exactor)

    Jmeter 正则表达式提取器详解(Regular Expression Exactor) Name(名称):随意设置,最好有业务意义. Comments(注释):随意设置,可以为空 Apply to ...

  9. WinDbg常用命令系列---显示当前异常处理程序链!exchain

    !exchain 这个!exchain扩展命令显示当前异常处理程序链. !exchain [Options] 参数: Options下列值之一: /c  如果检测到异常,则显示与调试C++ try/c ...

  10. 认识Nodejs

    一.概念 ①JavaScript运行环境:Node.js不是一门语言,不是库也不是框架,是一个JavaScript运行环境,简单点来讲就是Node.js可以解析执行JavaScript代码,也就是说J ...