(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. java中String创建对象分析(转)

    String str=new String("abc");   紧接着这段代码之后的往往是这个问题,那就是这行代码究竟创建了几个String对象呢? 相信大家对这道题并不陌生,答案 ...

  2. 2017-4-18/缓存、CDN

    1. 什么是缓存,为什么要用缓存? 缓存就是数据交换的缓冲区(称作Cache),是存贮数据(使用频繁的数据)的临时地方.当用户查询数据,首先在缓存中寻找,如果找到了则直接执行.如果找不到,则去数据库中 ...

  3. 七、持久层框架(MyBatis)

    一.MyBatis学习 平时我们都用JDBC访问数据库,除了自己需要写SQL,还要操作Connection,Statement,ResultSet这些. 使用MyBatis,只需要自己提供SQL语句, ...

  4. MapReduce- 数据的排序处理

    MapReduce- 数据的排序处理 package com.huhu.day02; import java.io.DataInput; import java.io.DataOutput; impo ...

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

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

  6. day2编程语言的两大分类

    编程的语言的发展经历了 机器语言 汇编语言 高级语言 高级语言更贴近人类的语言,但是必须被翻译成计算机能读懂的二进制后,才能够被执行,按照翻译方式分为 1   编译型(需要编译器,相当于用谷歌翻译); ...

  7. unity中让摄像机移动到鼠标点击的位置和鼠标控制平移视角

    private Vector3 targetVector3; private float movespeed=0.5f; private bool IsOver = true; private Gam ...

  8. bzoj1666

    题解: 简单模拟 按照题目意思来就可以了 代码: #include<bits/stdc++.h> using namespace std; int n,ans; int main() { ...

  9. ssm框架整合中的双亲容器

    SSM中Spring双亲容器的构造过程和XML加载顺序 Spring的父子容器问题和坑 Spring使用父子容器实现了很多功能,比如在Spring MVC中,展现层Bean位于一个子容器中,而业务层和 ...

  10. c#7的新特性

    1.out关键字 //可以直接声明使用 ",out int number); 2.元组 //有点类似匿名对象的样子 //用小括号包含变量,可以当做返回值,可以当做变量赋值等 //1.当做函数 ...