适配手机端之 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, ...
随机推荐
- Oracle 视图和索引
一.视图 1.什么是视图[View] (1)视图是一种虚表 (2)视图建立在已有表的基础上, 视图赖以建立的这些表称为基表 (3)向视图提供数据内容的语句为 SELECT 语句,可以将视图理解为存储起 ...
- ActiveMQ broker和客户端之间的确认
生产者发送消息:producer ---------> broker broker返回确认:broker ---------> producer 生产者发送同步消息,broker会返回Re ...
- K-Means ++ 和 kmeans 区别
Kmeans算法的缺陷 聚类中心的个数K 需要事先给定,但在实际中这个 K 值的选定是非常难以估计的,很多时候,事先并不知道给定的数据集应该分成多少个类别才最合适Kmeans需要人为地确定初始聚类中心 ...
- [转]10+倍性能提升全过程--优酷账号绑定淘宝账号的TPS从500到5400的优化历程
摘要: # 10+倍性能提升全过程--优酷账号绑定淘宝账号的TPS从500到5400的优化历程 ## 背景说明 > 2016年的双11在淘宝上买买买的时候,天猫和优酷土豆一起做了联合促销,在天猫 ...
- Android studio 一个项目引入另一个项目作为Libary
1.在我们开发Android项目时,有时需要一个项目作为另一个项目的工具类的引用,这样就需要配置下,使得MyLibrary到MyApplication作为一个module. 我们直接截图上步骤: 1. ...
- boost库的安装
1.网上下载boost_1_67_0.zip,解压 2.双击boost_1_67_0/bootstrap.bat文件,生成bjam.exe,b2.exe. 3.打开命令行运行 bjam stage - ...
- Linux c++ time different
下面这个函数可以得到微秒级别: #include<time.h> int clock_gettime(clockid_t clk_id,struct timespec *tp); 函数&q ...
- 【Crash】C++程序崩溃排查方法
windows下C++程序release版本崩溃错误排查方法. 一个你精心设计的24小时不间断运行,多线程的程序,突然运行了几个月后崩了,此问题是非常难以排查的,也是很头疼的问题. 现利用Google ...
- 用linq和datatable巧妙应用于微软报表rdlc
看看代码吧.现在我用Linq已经上瘾,对SQL语言已经几乎不用了,可惜的是rdlc不支持linq,要采用sql语言生成datatable,用datatable绑定rdlc,这里,应用了一个技巧,解决了 ...
- Java 算法 概念汇总
编程面试的10大算法概念汇总 以下是在编程面试中排名前10的算法相关的概念,我会通过一些简单的例子来阐述这些概念.由于完全掌握这些概念需要更多的努力,因此这份列表只是作为一个介绍.本文将从Java ...