(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-day97--git协同开发

    1.协同开发流程 - 在dev的基础上创建三个开发的分支 -每个人都在自己的分支中进行开发 -第一个人开发完成之后把review分支从云端版本库中拉下来 -将个人的分支与review分支合并(确保re ...

  2. Node.js的环境搭建

    Node.js 可以理解为服务端的JavaScript.是基于Chrome JavaScript 运行时的一个平台. 是一个事件驱动I/O,基于Google V8 引擎,执行起来速度特别快,性能非常好 ...

  3. Oracle 11.2.0.4.0 Dataguard部署和日常维护(2)-Datauard部署篇

    1. primary库设置dataguard相关参数   1.1. 强制primay库在任何状态下必须记录日志 SYS@userdata>select FORCE_LOGGING from v$ ...

  4. [LightOJ 1287] Where to Run

    Where to Run Last night you robbed a bank but couldn't escape and when you just got outside today, t ...

  5. 浅谈MSSQL2012中的列存储索引(columnstore indexes)

    列存储索引为MSSQL2012版本中引进的一个新特性.所有版本MSSQL中标准查询处理模式采用一次一行模型,操作符每次处理一行数据.列存储索引中增加了一种新的基于向量的查询执行功能,通过这种功能,操作 ...

  6. PHP指针相关函数

    1.each each — 返回数组中当前的键/值对并将数组指针向前移动一步 $arr = array("one", "two", "three&qu ...

  7. qq远程连接/windows远程桌面/teamviwer/xmanager/vnc的区别

    软件 客户端运行平台 服务端运行平台 服务端是否需要同子网或公网IP 网络断开当前执行命令是否会中止 评价 QQ远程连接 windows windows 否 否 感觉用了一两分钟就动不了了 windo ...

  8. etymon word write alb pain high alt increase large agency ag lose weight fat assist out~3

        1● alb   2● write =====>rait     1● alg 2● pain   痛,疼痛           1● alt 2● high   高         1 ...

  9. Vue--项目开发之实现tabbar功能来学习单文件组件2

    上一篇文章里item.vue里的span标签内容是写死了,但是我们不希望写死 所以对于五个tab选项的标题需要从外部传入,也就说 需要在item.vue里的script里写上 export defau ...

  10. 【基础】iframe之间的切换(四)

    案例: 打开http://mail.126.com/,定位登录输入框时,却总是定位不到元素,后来发现,登录的内容在一个iframe中. 一.由主页面切换至iframe dr.switchTo().fr ...