适配手机端之 rem
(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的更多相关文章
- CSS3及JS简单实现选项卡效果(适配手机端和pc端)
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- 手机端布局rem 与vm的使用
手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...
- 手机端使用rem的适配
<html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
- 手机端布局 - rem计算
功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...
- 适配手机端rpx像素
<script src="static/js/adaptive.js"></script> <script type="text/javas ...
- 用Desmos玩极坐标[适配手机端]
前言 数学给人的印象一直就是算算算,今天我们不算,我们只玩. 必备条件 ①."呆萌"软件--Desmos 网址:https://www.desmos.com/calculator, ...
随机推荐
- Oracle11g温习-第十四章:约束( constraint )
2013年4月27日 星期六 10:48 1.约束的功能 通过一些强制性商业规则,保证数据的完整性.一致性 2.约束的类别 1 ) not null 不允许为空 2 ) check ...
- tomcat压缩版配置
下载Jdk并安装 配置Java环境变量 因为需要用services.bat安装,services.bat中 rem Make sure prerequisite environment variabl ...
- JavaScript基础(四)
十六.client.offset.scroll系列 1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- vue 中router.go、router.push和router.replace的区别
router.go(n) 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要 ...
- ActiveMQ 消息的重新投递
正常情况下:consumer 消费完消息后,会发送"标准确认"给 broker,这个确认对象以 MessageAck 类表征: // 省略其他代码.类中定义了各种确认的类型 pub ...
- 牛客网 PAT 算法历年真题 1008 : 锤子剪刀布 (20)
锤子剪刀布 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 大家应该都会玩“锤子剪刀布”的游戏:现给出 ...
- pyqt实现滑动开关
https://www.cnblogs.com/feiyangqingyun/p/6035633.html 根据Qt的实现,在PyQt上面实现了滑动开关的控件 import sys from PyQt ...
- 通过JdbcTemplate编写数据访问(二十八)
数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. 首先,为了连接数据库需要引入jdbc支持,在pom.xml中引入如下配置: 1 2 3 4 < ...
- ACCESS数据库基本使用
ACCESS是Office自带的数据库,使用起来非常方便. 相比,其它数据库来说,使用率较低,但是同MYSQL一样,免费.正因为如此,所以很多建站的程序员,还是会选择使用它. 部分代码: <sc ...
- boost库的安装
1.网上下载boost_1_67_0.zip,解压 2.双击boost_1_67_0/bootstrap.bat文件,生成bjam.exe,b2.exe. 3.打开命令行运行 bjam stage - ...