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. 让ListView回来原来的位置

    让ListView回到原来的位置 当从ListView中的某一个Item跳转到其他的Activity,进行操作之后,ListView可能需要刷新(重新加载数据源),这个时候ListView就会回到原始 ...

  2. imagebutton 设置了src属性的图片更换

    <ImageButton android:id="@+id/mediacontroller_play_pause" android:layout_width="wr ...

  3. C#使用Quartz.NET详解

    Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不牺牲 ...

  4. java线程系列---Runnable和Thread的区别 (转载)

    转自:http://blog.csdn.net/wwww1988600/article/details/7309070 在java中可有两种方式实现多线程,一种是继承 Thread类,一种是实现Run ...

  5. J20170916-hm

    スタイルシート 样式表 シール 封条 シート 纸片 マニフェスト 货单(Rails) ダイジェスト 消化,(Rails 附加哈希值) インタプリタ n. 解释者; 口译译员; [军事] 判读员; [自 ...

  6. oracle数据库简单操作

    导入某用户所有表和数据:imp sgp/sgp@192.168.0.99:1521/orcl file=sgp20161025.dmp full=y 导出指定表及数据:exp sgp/sgp@192. ...

  7. c3p0-config.xml文件简单说明与备忘

    <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <named-confi ...

  8. [Swift通天遁地]五、高级扩展-(2)扩展集合类型

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. python - 解决 ModuleNotFoundError: No module named 'pip'

    1.pip的版本为 9.0.3  想用 pip install -U pip 更新下包,但是在更新过程中出现了报错,如下所示: 2.然后尝试用pip install pandas包,提示 Module ...

  10. $P5269 欧稳欧再次学车$

    \(problem\) 哇 看各位巨佬都来发\(T1\)的题解 我也来发一篇.(别的题目不会别瞎bb) 题目大意就是 \(T\) 秒 能走多少路程 第一行六个整数 \(T,N,L,R,X,K\) 接下 ...