移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形。所以在次我们就用到了rem,使用rem为单位,在任何移动端下显示的效果都是一样的。
只要我们在页面的head中引入下面的 rem.js :
! function(n) {
var e = n.document,
t = e.documentElement,
i = 750,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 750 && (n = 750);
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
上面的一段rem.js代码在一般情况下都是没有问题,但是如果遇到了某些设备设置了大字体模式(老人机模式,哈哈),页面的显示效果就会变形,所以根据这一情况,经过完善后的rem.js 如下:
;(function(win) {
var docEl = win.document.documentElement,
tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
var rem = width / 750*100;//以750px为原稿,除以100可得各元素的rem
docEl.style.fontSize = rem + "px";
var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem) {
var remScaled = rem / ( actualSize / rem );
docEl.style.fontSize = remScaled + "px"
}
} function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
} win.addEventListener("resize", function() { dbcRefresh() }, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { dbcRefresh() }
}, false);
refreshRem();
})(window);
上面的rem.js 都是根据750px设计的,100px = 1rem
移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式的更多相关文章
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端适配(rem单位定义方法)
注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 浅谈移动端适配-rem
对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...
- 小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
随机推荐
- 【kuangbin带你飞】 MST专题
唉,被班级合唱和复变考试搞得心力交瘁.新算法学不进去,更新下吧 A - Til the Cows Come Home The Head Elder of the tropical island of ...
- 51Nod 1068 Bash游戏 V3 (这规律不好找)
有一堆石子共有N个.A B两个人轮流拿,A先拿.每次拿的数量只能是2的正整数次幂,比如(1,2,4,8,16....),拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出 ...
- AcWing 892. 台阶-Nim游戏
#include<iostream> using namespace std; int n; int main() { cin>>n; ; ; i<=n; i++) { ...
- 在CentOS上通过Docker方式安装Redis
在CentOS上通过Docker方式安装Redis 首先保证已经安装docker. 拖拽redis镜像 docker pull redis 启动redis docker run -p 6379:637 ...
- Centos7部署jenkins
1. 下载rpm包: a) 下载地址:https://pkg.jenkins.io/redhat-stable/ b) 点选一个下载即可,例如点选:“jen ...
- 后台 - java 数组
声明 int[] arr = new int[5]; 在数组中插入数据 备注:i是插入的位置,i+1是实际位置 public static int[] insert(int[] arr,int i,i ...
- linux命令 mv
后缀--backup=<备份模式>:若需覆盖文件,则覆盖前先行备份: -b:当文件存在时,覆盖前,为其创建一个备份: -f:若目标文件或目录与现有的文件或目录重复,则直接覆盖现有的文件或目 ...
- python3练习100题——011
原题链接:http://www.runoob.com/python/python-exercise-example11.html 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔 ...
- HTTP响应头 状态码
HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传 ...
- Android SDK安装环境变量配置
安卓tool: http://tools.android-studio.org/ SDK下载地址:http://dl.google.com/android/android-sdk_r24.4.1-wi ...