1. 概述

1.1 说明

rem是css3中新增的一个单位属性(font size of the root element)，根据页面的根节点(html)的字体大小进行转换的单位，通过此单位属性可以进行自适应性布局开发。

1.2 示例说明

　　rem的初始值是16px，即默认值为1rem=16px;若在根节点html中设置了对应的font-size值，则1rem等于所设置的值，如下示例(html中font-size:100px，即1rem=100px)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <style>

    html,body{

      font-size: 100px;

    }

    div{

      width: 1rem;

      height: 1rem;

      background: red;

    }

  </style>

</head>

<body>

<div></div>

</body>

</html>

2. js页面计算rem

　　说明：使用以下js后，可以看到html对应的font-size的值是多少，此时1rem即为此font-size值。

window.onload = function() {

  /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了好算*/

  getRem(750, 100);

};

window.onresize = function() {

  getRem(750, 100);

};

function getRem(pwidth, prem) {

  let html = document.getElementsByTagName('html')[0];

  let oWidth = document.body.clientWidth || document.documentElement.clientWidth;

  html.style.fontSize = oWidth / pwidth * prem + 'px';

}

　　

CSS rem长度单位的更多相关文章

  1. 第七十七节，CSS3前缀和rem长度单位

    CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...

  2. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  3. CSS的长度单位

    对于css的长度单位真的有必要知道一下.那么css长度单位有哪些呢? 分成两大类: 1.绝对单位:不会因为其他元素的尺寸变化而变化.坚持自我. 2.相对单位:没有一个确定的值,而是由其他元素的尺寸影响 ...

  4. css - rem和vw

    css - rem和vw 物理像素 物理像素在不同的设备中1px里可以容纳的像素颗粒是不相同的,所以1px这个单位其实也是有N个像素颗粒填充的.同一尺寸屏幕的每个像素点所能容纳的像素颗粒越多显示效果越 ...

  5. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  6. css rem计算

    先抛出一个问题:为什么要选择rem? px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力, ...

  7. 这次我好像才真的明白了CSS Rem字体计算的原理

    背景 如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单. 根字体大小计算核心原理 设备的根字体大小 * ...

  8. CSS: rem

    .rem是(font size of the root element) 一般都是body的font-size为基准,即rem是相对于根元素. 字体单位 根据html根元素大小而定,同样可以作为宽度, ...

  9. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

随机推荐

  1. Lua Doc生成工具

    Luadoc http://keplerproject.github.io/luadoc/ Overview LuaDoc is a documentation generator tool for ...

  2. Play XML Entities

    链接:https://pentesterlab.com/exercises/play_xxe/course Introduction This course details the exploitat ...

  3. python3.x与2.x区别

    1.性能 Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可 以取得很好的优化结果. Py3.1性能比Py2 ...

  4. C++ primer 11章关联容器

    map set multimap (关键字可重复出现) multiset 无序 unordered_map  (用哈希函数组织的map) unordered_set unordered_multima ...

  5. 时间戳time

    时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日开始按秒计算的偏移量(time.gmtime(0))此模块中的函数无法处理1970纪元年以前的时间或太遥远的未来(处理极 ...

  6. 第25月第3天 Mxshop项目记录01

    1.项目 https://github.com/mtianyan/VueDjangoFrameWorkShop virtualenv命令 virtualenv . virtualenv -p /ana ...

  7. python中的日志操作和发送邮件

    1.python中的日志操作 安装log模块:pip install nnlog 参数:my_log = nnlog.Logger('server_log.log',level='debug',bac ...

  8. js监听浏览器返回事件

    $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { window.loca ...

  9. 【mmall】IDEA中Service层无法识别Mapper，但是代码通过问题

    解决方案

  10. R大

    知乎链接 https://www.zhihu.com/collection/114506870