适配手机端之 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, ...
随机推荐
- WCF开发实战系列一:创建第一个WCF服务 转
转 http://www.cnblogs.com/poissonnotes/archive/2010/08/28/1811064.html 在这个实战中我们将使用DataContract,Servic ...
- Beta阶段——第1篇 Scrum 冲刺博客
第1篇 Scrum 冲刺博客 a. 介绍小组新加入的成员,Ta担任的角色. 新加入成员 郭炜埕 原先担任的角色 前端界面设计 现在担任的角色 前端开发,并协助后端开发 新加成员介绍 炜埕同学对界面设计 ...
- https 不会被中间人攻击——因为中间人即使拿到了数据,也是加密的
只要你登陆了一个使用 HTTPS 数据加密的网站,浏览的页面的内容如果被人中途看见,将会是一团乱码.它也能保证,你浏览的页面就是你想浏览的,不会被黑客在中途修改,网站收到的数据包也是你最初发的那个,不 ...
- Android Studio向项目添加C/C++原生代码教程
说明:本文相当于官方文档的个人重新实现,官方文档链接:https://developer.android.com/studio/projects/add-native-code 向项目添加C/C++代 ...
- MySQL修改root密码教程
1.记得密码但想要更新密码 mysql -uroot -p #使用当前密码登录mysql update MySQL.user set password=PASSWORD('新密码') where Us ...
- 把旧系统迁移到.Net Core 2.0 日记(8) - EASYUI datagrid+ Dapper+ 导出Excel
迁移也没太大变化,有一个, 之前的Request.QueryString 是返回NameValueCollection, 现在则是返回整个字符串. 你要改成Request.Query[“key”] 直 ...
- SpringBoot的Profile文件
1.多Profile文件我们在主配置文件编写的时候,文件名可以是application-{profile}.properties/yml默认使用application.properties的配置 2. ...
- python运算符号
运算符 比较运算 赋值运算 逻辑运算 成员运算
- day6-if,while,for的快速掌握
python的缩进和冒号 python之所以如此简单,归功于它的缩进机制,严格的缩进机制是的代码非常整齐规范,赏心悦目,提高了可读性,在一定意义上提高了可维护性,但对于从其他语音转过来的朋友如:jav ...
- 【转载】Maven中的BOM概念
1.概述 1.1.什么是 BOM? BOM stands for Bill Of Materials. A BOM is a special kind of POM that is used to c ...