rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem

<style type="text/css">
    section {
        width: 100%;
        height: 100%;
        background: red;
    }
    .page{
        width: 5rem;
        height: 10rem;
        background: yellow;
        font-size: 0.3rem;
    }
    </style>

<body>
    <section>
        <div class="page">rem跟着html:font-size变化</div>
    </section>
</body>

<script type="text/javascript">
var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
 };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>

em和rem的区别的更多相关文章

  1. css中px，em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  2. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  3. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  4. 你真的知道em和rem的区别吗？

    前言 em 和 rem 都是相对单位,在使用时由浏览器转换为像素值,具体取决于您的设计中的字体大小设置. 如果你使用值 1em 或 1rem,它可以被浏览器解析成 从16px 到 160px 或其他任 ...

  5. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  6. （转）px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  7. px、em、rem的区别

    一.PX: px像素(Pixel):相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用 ...

  8. 彻底弄懂px,em和rem的区别

    国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...

  9. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

  10. 比较css中单位px，em和rem的区别

    国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...

随机推荐

  1. 安装gitlab-runner

    # 下载 $sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/lat ...

  2. JiJiDown

    发生了预料之外的错误:System.Reflection.TargetInvocationException: Exception has been thrown by the target of a ...

  3. google ---gson字符串数组用GSON解析然后用逗号隔开拼接，去掉最后一个逗号

    public static void main(String[] args) { String ss= "[{\"type\":\"0\",\&quo ...

  4. [Groovy]Parse properties file in Groovy

    def props = new Properties() new File("foo.properties").withInputStream { s -> props.lo ...

  5. FlowLayout（流式布局）用法

    https://blog.csdn.net/liujun13579/article/details/7771191

  6. 待修改 URAL 1542

    #include<bits/stdc++.h> using namespace std; const int maxn = 2e5+2e4+11; const int dep = 666; ...

  7. Java发送http请求(get 与post方法请求)

    转载:https://www.cnblogs.com/zzw1994/p/5140538.html

  8. thinkPHP5.0验证码不显示

    1.使用composer安装时,验证码无法正常显示 主要是因为验证码扩展库的版本安装不正常,官方的5.0版本的扩展库版本号都是1.*,默认安装的是2.0版本,2.0版本均为ThinkPHP5.1版本专 ...

  9. 01-消息中间件概述和ActiveMq入门

    1.mq解决的问题 系统异步处理 应用解耦 流量削峰 日志处理 消息通信 2.消息中间件的2中模型 2.1 Point-to-Point(P2P) / 点对点 / 类比:送快递 特点: + 一个消费生 ...

  10. 安装Python + Selenium

    1.Python下载与安装‍ 先去Python官网下载安装包:http://www.python.org/ 下载后按步骤安装(最好不要安装到系统盘) 安装好后将安装路径(Python和Scripts) ...