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. js 格式化时间

    Date.prototype.format = function(format) { var date = { , "d+": this.getDate(), "h+&q ...

  2. SQL Server进阶 遍历表的几种方法

    https://www.cnblogs.com/mcgrady/p/4182486.html

  3. IDEA导入JUnit4

    Step 1. IDEA最上面一栏的菜单栏中,选File->Project Structure(从上往下第11个),弹出窗口左边有一个列表,选Module. Step 2. 右侧有一个带3个标签 ...

  4. 使用 Topshelf 创建 Windows 服务

    Ø  前言 C# 创建 Windows 服务的方式有很多种,Topshelf 就是其中一种方式,而且使用起来比较简单.下面使用 Visual Studio Ultimate 2013 演示一下具体的使 ...

  5. CoreText实现图文混排

    CoreText的介绍 Core Text 是基于 iOS 3.2+ 和 OSX 10.5+ 的一种能够对文本格式和文本布局进行精细控制的文本引擎.它良好的结合了 UIKit 和 Core Graph ...

  6. 代码管理工具：使用github和git工具管理自己的代码

    一.git工具和账户创建 1.1 安装 Git 是 Linus Torvalds 最近实现的源代码管理软件."Git 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系 ...

  7. php制作圆形用户头像——自定义封装类源代码

    思路 使用图层的方法设计,共需要创建3个图像层 1.底层:最后生成的图像 2.真实用户头像:作为中间层,用户上传的真实头像图片 3.圆形蒙版:作为最上层,在蒙版中绘制圆形,并设置为透明 如图: 代码如 ...

  8. [C++]基于Curses库的实时系统监测可视化系统-2017-12-09 15-07-42

    Congratulations 0.0 技术记录 [1]  [C++]Linux之Ubuntu下编译C程序出现错误:“ stray ‘\302'或者'\240' in program”的解决方案 [2 ...

  9. dwr出现session error

    把项目冲tomcat6迁移到tomcat7之后,在项目运行中发现用到dwr的地方出现了session error错误, 网上搜了一下,是因为tomcat7的安全机制. 解决方法: 在项目的web.xm ...

  10. G - WiFi Password Gym - 101608G (异或思维题+曲尺)

    题目链接:https://cn.vjudge.net/contest/285962#problem/G 题目大意:给你n和m,n代表有n个数,然后让你找出一个最长的区间,使得这个区间内的所有的数的‘’ ...