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. 4.4系统,拍照-裁剪,resultCode返回0

    问题描述: take photo -> 拍照 -> 确定 -> 截图 -> 保存,此时返回给onActivityResult的resultCode是0,截图无效.我查看图片储存 ...

  2. TS流解析 四

    一 从TS流开始 数字电视机顶盒接收到的是一段段的码流,我们称之为TS(Transport Stream,传输流),每个TS流都携带一些信息,如Video.Audio以及我们需要学习的PAT.PMT等 ...

  3. E20170620-hm

    dump  n. 垃圾场; 仓库; 无秩序地累积;  vt. 倾倒; 倾销; 丢下,卸下; 摆脱,扔弃; terminate   vt. 结束; 使终结; 解雇; 到达终点站; adj. 结束的; d ...

  4. LuaBridge

    不能直接公开基类的函数,必须单独公开基类,并声明继承关系  deriveClass<Player, BaseController>("Player") 直接公开基类的函 ...

  5. VUE element-ui下拉列表获取label值

    有这样一个场景,当我们往后台数据传的是id时,我们却想在前台获取列表显示的值,这时候可以用下面的方法来获取你想要的label值 let obj = {}; obj = this.arr.find((i ...

  6. [转]linux之top命令

    转自:http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316399.html 简介 top命令是Linux下常用的性能分析工具,能够实时显示系 ...

  7. UIPickerView的应用

    UIPickerView 是一个选择器控件, 它可以生成单列的选择器,也可生成多列的选择器.UIPickerView 直接继承了 UIView ,没有继承 UIControl ,因此,它不能像 UIC ...

  8. reactnative(1) - RefreshControl 使用案例

    'use strict'; import React, { Component } from 'react'; import { AppRegistry, ScrollView, StyleSheet ...

  9. cplusplus系列>utility>pair

    http://www.cplusplus.com/reference/utility/pair/ 用于存储一对异构对象 // Compile: g++ -std=c++11 pair.cpp #inc ...

  10. 搭建本地wordpress

    1.首先,下载xampp,安装按默认勾选即可. 2.安装完成后,启动Apache和MySQL这两个服务. 启动后变成绿色,表示启动成功. 3.点击MySQL项的Admin进入数据库后台. 4.点击用户 ...