参考文档:

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

var designWidth = 640, rem2px = 100;
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize =
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. ArcGIS pro 发布地图服务(一)动态地图服务

    1.软件:arcgis pro 2.4  数据:.mxd文档. 2.导入mxd文档. 3.登录portal账号 4.分析—发布 5.在server中的地图服务 JavaScript api 查看 6. ...

  2. NumPy的Linalg线性代数库探究

    1.矩阵的行列式 from numpy import * A=mat([[1,2,4,5,7],[9,12,11,8,2],[6,4,3,2,1],[9,1,3,4,5],[0,2,3,4,1]]) ...

  3. 《团队作业第三、四周》五阿哥小组Scrum 冲刺阶段---Day3

    <团队作业第三.四周>五阿哥小组Scrum 冲刺阶段---Day3 一.项目燃尽图 二.项目进展 20182310周烔今日进展: 主要任务一览:界面布局的设计 20182330魏冰妍今日进 ...

  4. 10 分钟了解 Actor 模型

    http://www.moye.me/2016/08/14/akka-in-action_actor-model/ 过去十几年CPU一直遵循着摩尔定律发展,单核频率越来越快,但是最近这几年,摩尔定律已 ...

  5. Support Vector Machines

    支持向量机SVM. 简介 SVM核函数包括线性核函数.多项式核函数.径向基核函数.高斯核函数.幂指数核函数.拉普拉斯核函数.ANOVA核函数.二次有理核函数.多元二次核函数.逆多元二次核函数以及Sig ...

  6. 使用if和switch制作简单的年龄生肖判断

    -年 查询 --> var oDiv =document.getElementById("cont"); var oYear = document.getElementByI ...

  7. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  8. 一篇文章了解Github和Git教程

    有趣有内涵的文章第一时间送达! 喝酒I创作I分享 关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 本篇文章同步微信公众号 欢迎大家关注我的微信公众号:「醉翁猫咪」 生活中总有些东 ...

  9. c博客作业01——顺序 分支结构

    本章学习总结 1.1 学习内容总结 ·学习switch分支的使用,switch后加括号(),括号内填一个变量或字符 如 switch (a) { case 2: case 3: default: } ...

  10. Approximate Search

    题目链接:Gym-101492H 动态规划,应该是比较基础的,可是自己就是不会QAQ.... /* 把使用机会当成“花费” */ # include <iostream> # includ ...