适配手机端之 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, ...
随机推荐
- String.Format 格式化例子
//格式为sring输出// Label1.Text = string.Format("asdfadsf{0}adsfasdf",a);替换符// Label2.Text ...
- Git的各种状态
考:http://blog.csdn.net/wirelessqa/article/details/19548057 按照文件的存放位置分: 在你自建的Git本地仓库中,有三个区域:本地目录.暂存区. ...
- [NOIP 2015TG D2T3] 运输计划
题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道连通了 L 国的所有星球. 小 P 掌管一家 ...
- 第2天【OS Linux发行版介绍、Linux系统基础使用入门、Linux命令帮助、Linux基础命令】
Logout 退出系统 Gedit 文本编辑器工具 Uname –r 查看内核版本信息,uname –a 比较详细 Cat /proc/cpuinfo 查看CPU Cat /p ...
- 利用ML&AI判定未知恶意程序——里面提到ssl恶意加密流检测使用N个payload CNN + 字节分布包长等特征综合判定
利用ML&AI判定未知恶意程序 导语:0x01.前言 在上一篇ML&AI如何在云态势感知产品中落地中介绍了,为什么我们要预测未知恶意程序,传统的安全产品已经无法满足现有的安全态势.那么 ...
- js问题 项目问题
项目问题1. js 中字符串替换函数var a = 'fajlfjal'a.replace(/b/,'a') // 不能直接改变a 而是返回替换后的值 2. vue 属性绑定中 class style ...
- mvc4自定义辅助器方法的学习
1.什么是辅助器 它们可以对代码块和标记进行打包,以便能够在mvc框架应用程序中重用.可以理解成编写在页面上的C#代码(方法). 2 .自定义辅助器 创建“基本”的mvc示例,并创建Basic控制器, ...
- mysql 语句根据身份证查询年龄,地址,性别
select case left(idcard,2) when '11' then '北京市'when '12' then '天津市'when '13' then '河北省'when '14' th ...
- error: http://ppa.launchpad.net lucid Release: The following signatures couldn't be verified because
ubuntu 命令行sudo apt-get update W: GPG error: http://ppa.launchpad.net lucid Release: The following si ...
- 【Java算法】条件运算符
利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. 条件运算符的表达式为: 表达式1?表达式2:表达式3 当表达式1为true ...