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. iOS自定义相机

    1.首先声明以下对象 #import <AVFoundation/AVFoundation.h> //捕获设备,通常是前置摄像头,后置摄像头,麦克风(音频输入) @property (no ...

  2. U19464 山村游历(Wander) LCT维护子树大小

    \(\color{#0066ff}{ 题目描述 }\) 在一个偏远的小镇上,有一些落后的山村.山村之间通过一些道路来连接.当然有的山村可能不连通. 一年当中会发生很多大事,比如说有人提议要在山村\(i ...

  3. P1505 [国家集训队]旅游

    \(\color{#0066ff}{题 目 描 述}\) Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了 ...

  4. 缩点+spfa最长路【bzoj】 1179: [Apio2009]Atm

    [bzoj] 1179: [Apio2009]Atm Description Siruseri 城中的道路都是单向的.不同的道路由路口连接.按照法律的规定, 在每个路口都设立了一个 Siruseri ...

  5. opencv-图片合成视频

    无论视频的合成还是分解我们都需要进行解码器或者是编码器(因为视频不是一帧一帧进行存储的,而是进行过压缩编码.) import cv2 img = cv2.imread('image1.jpg') im ...

  6. zookeeper分布式锁简单实现(JavaApi)

    1.创建会话连接 package com.karat.cn.zookeeperAchieveLock.javaapilock; import org.apache.zookeeper.WatchedE ...

  7. [PowerShell]template engine

    今天讨论的是如何在Powershell里实现一个简单的Template Engine的功能. 假设模板文件的内容如下:template.tt hello $name welcome $company ...

  8. Educational Codeforces Round 3 B

    B. The Best Gift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  9. input只能输入非负数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. hdu 1556 涂气球 线段树（区间更新~对区间[x,y]更新，求任意节点被更新的次数）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...