function adapt(designWidth, rem2px){

  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 + '%';

  var st = document.createElement('style');

  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";

  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"

  st.innerHTML = portrait + landscape;

  head.appendChild(st);

  return defaultFontSize

};

var defaultFontSize = adapt(640, 100);

  转载地址:http://mp.weixin.qq.com/s/JIRN56acxvJgmzk1Fjj6LA

『REM』手机屏幕适配的更多相关文章

  1. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  2. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  3. 了解真实的『REM』多终端屏幕适配

    作者:hbxeagle 链接:github.com/hbxeagle/rem/blob/master/README.md rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使 ...

  4. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  5. web app变革之rem(手机屏幕实现全适配)

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  6. Android开发——Android手机屏幕适配方案总结

    )密度无关像素,单位为dp,是Android特有的单位 Android开发时通常使用dp而不是px单位设置图片大小,因为它可以保证在不同屏幕像素密度的设备上显示相同的效果. /** * dp与px的转 ...

  7. Unity 手机屏幕适配

    ////如有侵权 请联系我进行删除 email:YZFHKM@163.com 1.游戏屏幕适配 屏幕适配是为了让我们的项目能够跑在各种电子设备上(手机,平板,电脑) 那么了解是适配之前首先要了解两个知 ...

  8. CSS3自适配手机屏幕

    @media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...

  9. 移动 web 端屏幕适配 - rem

    前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...

随机推荐

  1. ios11--UIButton

    // // ViewController.m // 02-UIButton(在代码中使用) // #import "ViewController.h" @interface Vie ...

  2. raid5什么意思?如何做raid5?raid5 几块硬盘?

    raid5什么意思?如何做raid5?raid5 几块硬盘? 分类: 项目管理2012-09-28 00:38 5326人阅读 评论(0) 收藏 举报 一.raid什么意思?RAID是“Redunda ...

  3. 重装mysql

    重装mysql方法. 转自http://blog.sina.com.cn/s/blog_73000beb01012eh4.html 1.删除 mysql 1.1 sudo apt-get autore ...

  4. 要自己当技术使用astgo运营网络电话系统,必须掌握的基本技术

    知道什么是centos 知道怎么远程访问centos服务器 (常用工具 Secure Shell Client.WINSCP) 知道重启服务器的命令是 reboot 知道你的服务器是没有图形界面的,所 ...

  5. win10系统下,开启数据库远程连接方式

    右键左下角的windows标志,选择控制面板 2.查看方式修改为大图标 3.选择高级设置 4.新建入站规则 5.选择端口然后下一步 6.选择tcp协议,端口输入80,3306 7.选择允许连接 8.规 ...

  6. JavaScript中的substr和Java中的substring

    JavaScript::substr(index, length)从下标开始截取多少位,如果length为空,则截取到最后,-1倒数第一位,-2倒数第二位.... Java:substring(sta ...

  7. ACM_小凯的排序(字符串)

    小凯的排序 Time Limit: 2000/1000ms (Java/Others) Problem Description: 调皮的小凯喜欢排序,拿到什么东西都要排一下序.现在他觉得单一的递增递减 ...

  8. ACM_小游戏(棋盘博弈)

    Problem Description: 最近kiki无事可做,于是他想玩棋盘游戏.棋盘的大小是n * m.首先,棋子放置在右上角(1,m). 每次可以将棋子向左方,下方或左下方移动一个位置.当移动到 ...

  9. oracle数据库忘记用户名和密码莫着急

    刚安装完Oracle 11g后,登录的时候没有记住用户名和密码,解决方法:新建一个用户 第一步:以系统身份登录 cmd--->sqlplus 提示输入用户名,然后输入sqlplus/as sys ...

  10. AOP注解不起作用的debug结果

    经过2天的调试,我发现AOP注解配置不起作用居然是表达式的错误导致的 在xml文件中配置的base-package有关,初步认为@PointCut只能使用base-package..*(..)这样的方 ...