参考文档:

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. Mac在zsh环境安装Maven

    Mac OS先安装了oh-my-zsh和iterm2,设置系统的默认语言为zsh.再安装Maven的时候,发现添加profile文件,关闭iterm后,mvn的环境变量一直没有生效. 折腾了好久,突然 ...

  2. 压缩及解压命令gzip、bzip2、tar

    1. gzip 描述:压缩与解压缩 用法:gzip[选项]...[文件名称]... 选项:-d 解压 gzip hello.txt     # 文件压缩后名为hello.txt.gz gzip -d ...

  3. java服务端的效率

    java服务端的效率 可以的 socketclient  thread 线程池 发送消息  80个socket client并发

  4. webpack-dev-server 本地代理proxy

    proxy: [ { context: ['/user', '/rights', '/resource/getAdNotice'], target: 'https://plus.m.jd.com', ...

  5. Json在序列化注意问题

    Java中的Json序列化,不容忽视的getter 问题重现 public class AjaxJson { private boolean success; private String msg; ...

  6. 树莓派3 有线网卡静态IP设置

    步骤: 1.使用SSH登陆树莓派,第一连接可使用鼠标+键盘+显示器直接进入树莓派界面设置无线连接. 2.更新软件: sudo apt-get update 3.安装vim:系统自带的vi非常不好用,使 ...

  7. [ARIA] aria-describedby & aria-labelledby

    When to use describedby: For example you have a close button: <button aria-describedby="clos ...

  8. L1443

    一,看题 1,题不难,但是这个马怎么走,着实搞懵我了. 2,转过去就发现,其实变一下dx,dy就ok. 3,除了输出外似乎也没什么坑. 4,其实也是有的,这个步数也是... 5,作为一道提高-的搜索题 ...

  9. React-Redux常见API

    React-Redux是在Redux的基础上,将其大量重复的代码进行了封装. 1. Provider 利用context对象给所有子组件提供store.不再需要在每个组件都引用store. impor ...

  10. windows系统的快速失败机制---fastfail

    windows系统的快速失败机制---fastfail,是一种用于“快速失败”请求的机制 — 一种潜在破坏进程请求立即终止进程的方法. 无法使用常规异常处理设施处理可能已破坏程序状态和堆栈至无法恢复的 ...