适配手机端之 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, ...
随机推荐
- hdu-6434-欧拉函数
Problem I. Count Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Other ...
- MySQL安装脚本最佳实践
MySQL安装脚本最佳实践 2018年9月19日 17:01 #!/bin/bash export host_ip=192.168.7.206 echo '#1.取master主机ip的后三位 ...
- Leetcode 1006. 笨阶乘
1006. 笨阶乘 显示英文描述 我的提交返回竞赛 用户通过次数305 用户尝试次数347 通过次数309 提交次数665 题目难度Medium 通常,正整数 n 的阶乘是所有小于或等于 n 的 ...
- python 小练习4
给你一个整数list L, 如 L=[2,-3,3,50], 求L的一个连续子序列,使其和最大,输出最大子序列的和. 例如,对于L=[2,-3,3,50], 输出53(分析:很明显,该列表最大连续子序 ...
- CRM 价格批导2<上一个太多冗余>
INCLUDE:LCRM_MKTPL_COND_IFF39 *--------------------------------------------------------------------- ...
- iBeacon室内定位原理解析【转】
目前,技术发展持续火热,因着iBeacon的定位精度和造价都比较符合国内室内定位的市场需求,下面我们来聊一聊iBeacon室内定位原理. iBeacon定位原理 iBeacon是一项低耗能蓝牙技术,工 ...
- .NET面试问题二
1.MVC中如何保持Session? 可以使用tempdata,viewdata,viewbag三种方式 tempdata:不同的控制器类或者动作间转换时保持数据,页面转向时也保持数据,是一个内部的S ...
- FJUT16级第一周寒假作业题解G题
题目链接:http://210.34.193.66:8080/vj/Contest.jsp?cid=160#P6 涨姿势题1 TimeLimit:1000MS MemoryLimit:128000K ...
- 撤销commit
如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d86c5 ...
- composer install Your requirements could not be resolved to an installable set of packages
composer install --ignore-platform-reqs 或者 composer update --ignore-platform-reqs