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. nagios安装使用指南

    话不多说,下面开始,nagios具体的介绍,可以搜一下,这篇文章为作者在实际操作中整理出来,写出来的都是负责人的内容~ 环境准备 此文档共用2台服务器的配置,操作系统均为centOS6.7,安装用户都 ...

  2. P2115 [USACO14MAR]破坏Sabotage

    题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...

  3. POI精确设置Excel的行高和列宽

    EXCEL的行高度和列宽度单位是不一样的. 1,EXCEL列高度的单位是磅,Apache POI的行高度单位是缇(twip): 1英寸=72磅=25.4毫米=1440缇1磅=0.353毫米=20缇 P ...

  4. opencv-视频基本操作

    写视频 # encoding: utf-8 ''' @author: gaoyongxian666 @file: opencv_video_write.py @time: 2018/4/15 11:1 ...

  5. redis分布式锁的使用

    一  本身自带的方法进行使用: <dependency> <groupId>redis.clients</groupId> <artifactId>je ...

  6. complex 类

    //定义一个复数类Complex,使得下面的代码能够工作. //Complex c1(3,5)//用复数3+5i初始化c1 //complex c2=4.5//用实数4.5初始化c1 //comple ...

  7. visio 使用技巧汇总

    1.visio中图形旋转任意角度的方法 视图----任务窗格----大小与位置----角度 2.箭头形状 更多形状---流程图----箭头形状 3.汇制虚线框 从基本形状中拖出一个矩形,右击矩形,选择 ...

  8. HDU-Fibonacci Again（打表找规律）

    There are another kind of Fibonacci numbers: F(0) = 7, F(1) = 11, F(n) = F(n-1) + F(n-2) (n>=2). ...

  9. 工具类_GsonUtils

    import java.lang.reflect.Type; import com.google.gson.Gson; /** * Gson工具类 2015-02-01<br/> * 1, ...

  10. rest_framework 的验证，权限，频率

    回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之 ...