这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用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及个别设备设置了大字体模式,导致页面变形的处理方式的更多相关文章

  1. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

  2. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  3. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  4. 移动端适配(rem单位定义方法)

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  5. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  6. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

  7. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  8. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  9. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

随机推荐

  1. 2020 Plan

    1. English IELTS  7.0 IELTS word 3271,  10 words diff 2 Grammar framework IELTS writing Friends foll ...

  2. 3.Docker 操作镜像

    获取镜像 之前提到过,Docker Hub 上有大量的高质量的镜像可以用,这里我们就说一下怎么获取这些镜像. 从 Docker 镜像仓库获取镜像的命令是 docker pull.其命令格式为: doc ...

  3. javax.naming.NameNotFoundException: Name jdbc is not bound in this Context

    这个错误的原因是没有项目使用到了Tomcat中配置的数据源(但是你本地没有配置),关于什么是JNDI看这篇文章就够了® 今天导入一个项目(比较老的),在本地运行时报错: Cannot resolve ...

  4. SimpleDateFormat中YYYYmmDDhhMMss大小写问题-获取不到正确时间以及常见的格式串

    1.问题解决: SimpleDateFormat sf = new SimpleDateFormat("YYYYmmDDhhMMss");String transTime = &q ...

  5. CTF——代码审计之变量覆盖漏洞writeup【2】

    题目: 基础: 所需基础知识见变量覆盖漏洞[1]  分析: 现在的$a=’hi’,而下面的函数需满足$a=’jaivy’才可以输出flag,那么需要做的事就是想办法覆盖掉$a原来的值. 那么出现的提示 ...

  6. LINUX使用SSH远程终端时,如何将运行时间长的程序在后台挂起,下次SSH登陆时继续使用同一个SHELL?

    我在某个平台上购买了一个云服务器,LINUX操作系统无图形化界面,硬盘空间较小.虽然在平台上可以通过其自带网页版VNC界面登陆SHELL进而操控云主机,但是每次需要操控都得打开网页登陆进平台,然后再进 ...

  7. mysql远程链接(可以在服务器上配置然后在本地连接远程服务器)

    ps:如果一下的连接不成功原因:一定要关闭windows防火墙或者linux的防火墙 1.在服务器端授权(黄色标记的地方第一个是用户名,第二个的意思是可以远程连接,第三个是密码) GRANT ALL  ...

  8. cookie和会话

    一.为什么要使用cookie和会话 HTTP是一种无状态技术,这意味着每个单独的HTNML页面都是一个无关的.当人们穿过站点时,HTTP 没有用于跟踪用户或保持变量的方法,尽管浏览器会跟踪你访问过的页 ...

  9. repeater列表中直接修改状态

    <asp:Repeater ID="RepeaterArticleList" runat="server" onitemdatabound="R ...

  10. 在SQL2005中修改数据库名称

    SQL Server 2005中有个数据库HT_WisdomDataBaseCenter,现在要将其改名为HT_NBSBOneNetcs1步骤:(1) 分离数据库:打开management studi ...