(function() {
var psdWidth = 1080,
maxRem = 100,
ch = document.documentElement.clientHeight || document.body.clientHeight,
cw = document.documentElement.clientWidth || document.body.clientWidth,
pageWidth; var calcRem = function() {
if (window.orientation && (window.orientation == 90 || window.orientation == -90)) {
pageWidth = Math.max(ch, cw);
} else {
pageWidth = Math.min(ch, cw);
} var rem = (pageWidth / psdWidth * 100).toFixed(2);
rem = Math.min(rem, maxRem);
window.rem = rem;
document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}; calcRem(); window["onorientationchange" in window ? "onorientationchange" : "onresize"] = calcRem;
})();

  

  Eg. PSD中的width为378px,那么在手机端代码中为378/100=3.78rem.

适配手机端之 rem的更多相关文章

  1. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  2. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  3. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  4. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  5. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

  6. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  7. 手机端布局 - rem计算

    功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...

  8. 适配手机端rpx像素

    <script src="static/js/adaptive.js"></script> <script type="text/javas ...

  9. 用Desmos玩极坐标[适配手机端]

    前言 数学给人的印象一直就是算算算,今天我们不算,我们只玩. 必备条件 ①."呆萌"软件--Desmos 网址:https://www.desmos.com/calculator, ...

随机推荐

  1. python-思路整理-虚拟环境

    虚拟环境: 如需多个版本的django或其他框架开发代码时,就可以用虚拟环境 pip3 install virtualenv # 创建虚拟环境 virtualenv virtualenv env1 # ...

  2. JS保留小数 去尾法 进一法 四舍五入法

    //toFixed 四舍五入遇到坑. 1.235.toFixed(2) = 1.23 1.2350001.toFixed(2) = 1.24 //去尾法 Number.prototype.toFloo ...

  3. 559. Maximum Depth of N-ary Tree C++N叉树的最大深度

    网址:https://leetcode.com/problems/maximum-depth-of-n-ary-tree/ 很简单的深度优先搜索 设定好递归返回的条件和值 /* // Definiti ...

  4. HBase环境搭建、shell操作及Java API编程

    一. 1.掌握Hbase在Hadoop集群体系结构中发挥的作用和使过程. 2.掌握安装和配置HBase基本方法. 3.掌握HBase shell的常用命令. 4.使用HBase shell命令进行表的 ...

  5. The Doors

    The Doors You are to find the length of the shortest path through a chamber containing obstructing w ...

  6. Linux 环境下 网络IO模型

    本文讨论的背景是Linux环境下的network IO. IO发生时涉及的对象和步骤: 对于一个network IO (这里我们以read举例),它会涉及到两个系统对象,一个是调用这个IO的proce ...

  7. 图解ActiveMQ virtual topic

    http://activemq.apache.org/virtual-destinations.html 普通的 topic 是发布/订阅模式:消息会被广播发送给所有的订阅者,订阅者拿到的是全部消息, ...

  8. C# WinForm通用皮肤

    最近做一个小项目,是以前的一个旧项目改造升级,添加些新功能需要用到c#来开发, 话说最近2年都在用Qt开发,c#都生疏不少,赶紧捡起来, 看到原来的就知道需要重新设计,所有打算找一款通用皮肤省事 下面 ...

  9. openssl安装/更新教程(CentOS)

    1.下载openssl 下载链接:https://www.openssl.org/source/snapshot/ 里边是当前仍支持版本的快照:同版本不同日期内容可能不同的,所以下载一般下对应版本的最 ...

  10. Struts初步入门(四)

    1.默认Action-深入Struts struts.xml 文件: <struts> <package name="default" namespace=&qu ...