rem相对于根元素html的,em相对于父元素的。
rem和em相对大小的值
默认情况下
如果你没有在根元素指定参照值,那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px,那 1rem 就为 20px。
html{font-size: 87.5%;}字体14px
rem 在 ie8 及以下的版本不支持外其他浏览器都支持
如果要使用 rem 单位,html 的字体默认大小必须设置为 12px

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

http://www.520ued.com/article/study-px-rem-tools

rem 与 px 手机页面自适应的更多相关文章

  1. 使用 rem 作为单位使页面自适应设备宽度

    一.新建 rem.js 文件,代码如下: export default function () { document.documentElement.style.fontSize = document ...

  2. 手机端页面自适应:rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  3. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  4. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  5. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  6. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  7. 手机端页面自适应解决方案—rem布局(该方案目前已过时)

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  8. rem手机端页面自适应布局(待修正下一篇完美布局)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

随机推荐

  1. 初学者的python学习笔记2——作业篇

    这次的作业是商城展示,最开始的确是一脸懵逼,后来研究了一下网上的例子,总算是搞出来了一个(其实算是网上列子的简化版?). 最开始是想要使用字典去做,发现显示列表的时候怎么也无法实现序号和名称对应,原因 ...

  2. VMware下利用ubuntu13.04建立嵌入式开发环境之一

    1.软件准备: (1) VMware网上很多,需要根据自己的需要选择,这里选用的VMware Workstation 9. (2)ubuntu  操作系统,同样根据自己的需要下载系统安装包.这里我选择 ...

  3. 学习中的错误——ubuntu 14.04 LTS 启动eclipse报错

    在ubuntu中启动eclipse报错:(Eclipse:15978): GLib-GIO-CRITICAL **: g_dbus_connection_get_unique_name: assert ...

  4. CenOS 6.5下安装docker(转)

    2014-12-15 10:23 blessed24 To be Done的博客 字号:T | T 最近在自己的centos上搭建了一个Docker,顺便将一些常用操作记录下. AD:51CTO网+ ...

  5. Enterprise Architect 学习 之 用例图

    用例模型 用例模型用来记录系统的需求,它提供系统与用户及其他参与者的一种通信手段. 执行者 用例图显示了系统和系统外实体之间的交互.这些实体被引用为执行者.执行者代表角色,可以包括:用户,外部硬件和其 ...

  6. 完整的分页存储过程以及c#调用方法

    高效分页存储过程 USE [db] GO /****** 对象: StoredProcedure [dbo].[p_Page2005] 脚本日期: // :: ******/ SET ANSI_NUL ...

  7. Centos配置国内yum源

    网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常的不错,将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下 ...

  8. Session Tracking Approaches

    cookies url rewriting hidden field see also: http://www.informit.com/articles/article.aspx?p=29817&a ...

  9. 数据结构《17》---- 自动补齐之《二》----Ternary Search Tree

    一. 序言 上一篇文章中,给出了 trie 树的一个实现.可以看到,trie 树有一个巨大的弊病,内存占用过大. 本文给出另一种数据结构来解决上述问题---- Ternary Search Tree ...

  10. SpringMVC接收Post的实体/JSon数据

    接口代码: @ResponseBody @RequestMapping(value = "/test",method = RequestMethod.POST)/*只允许POST方 ...