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. SQL Server进阶（十一）可编程对象——变量、 批、流元素、 游标

    变量 --------------------------------------------------------------------- -- Variables -------------- ...

  2. JDK8新特性04 方法引用与构造器引用

    import java.io.PrintStream; import java.util.Comparator; import java.util.function.*; /** * 一.方法引用 * ...

  3. 13.CrawlSpider类爬虫

    1.CrawlSpider介绍 Scrapy框架中分两类爬虫,Spider类和CrawlSpider类. 此案例采用的是CrawlSpider类实现爬虫. 它是Spider的派生类,Spider类的设 ...

  4. mysql查询表达式解析

    1.mysql> SHOW COLUMNS FROM users;+----------+----------------------+------+-----+---------+------ ...

  5. HttpClient 测试web API上传文件实例

    1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...

  6. loj 6436 PKUSC2018 神仙的游戏

    传送门 好妙蛙 即串\(s\)长度为\(n\)首先考虑如果一个长度为\(len\)的\(border\)存在,当且仅当对所有\(i\in[1,len],s[i]=s[n-len+i]\),也就是所有模 ...

  7. CSS面试复习（二）：CSS的使用

    一.CSS基础 1.选择器 选择器{ 属性:值: 属性:值 } 作用:用于匹配HTML元素.分类和权重.解析方式和性能.值得关注的选择器 分类: 元素选择器a{} 伪元素选择器::before{} 类 ...

  8. 上架一台Cisco防火墙及其架构

    领导给小白两条线,分别是电源线和网线,去吧,机房上架一台防火墙... 额, 然后小白抱着防火墙就去了...

  9. JDK开发环境搭建及环境变量配置

    Java配置----JDK开发环境搭建及环境变量配置 1. 下载安装安装JDK开发环境 http://www.oracle.com/technetwork/java/javase/downloads/ ...

  10. tomcat BIO / NIO

    BIO NIO ref https://www.jianshu.com/p/76ff17bc6dea http://gearever.iteye.com/blog/1841586