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. OZCode

    OZCode是一款辅助调试工具,调试linq很方便有点重量级,导致整个项目运行很慢,但是功能很强大. OZCode界面如下:

  2. 关于公众平台接口不再支持HTTP方式调用的公告

    为保证数据传输安全,提高业务安全性,公众平台将不再支持HTTP方式调用.避免影响正常使用中含有HTTP方式调用的服务,请开发者尽快调整,将现有通过HTTP方式调用的切换成HTTPS调用,平台将于201 ...

  3. crosstool-ng编译交叉工具链

    一.准备工作 1. 建立工作文件夹 2.下载crosstool-ng git clone https://github.com/crosstool-ng/crosstool-ng crosstool- ...

  4. [译]Nuget.Server

    原文 NuGet.Server是一个包,可用于使一个ASP.NET应用host一个package feed . 使用VS创建一个新的空WEB应用,添加Nuget.Server包. 配置应用的Packa ...

  5. Ubuntu18.04安装搜狗拼音输入法皮肤透明解决方法

    解决方法: 去搜狗输入法官网下载一个新的皮肤,然后右键用“搜狗输入法”打开,就解决了!!!

  6. PHP面试（三）：面试技巧

    一.面前准备 1.注意形象——穿着得体.注意言行举止. 2.提前了解——公司情况.业务情况 3.充分准备——自我介绍.对所学知识点充分复习.重点复习自己易犯错误.充分的休息 二.注意事项 1.遵守时间 ...

  7. html页面高度问题

    首先,上图 说明 1. clientHeight大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内 ...

  8. cmd关闭被占用的端口命令及教程详解

    //关闭端口占用命令eg:1. netstat -nao | findstr “8080” 查询8080端口2. taskkill /pid 3017 /F 关闭pid为3017的进程 //详解 ↓但 ...

  9. IOC 和DI的区别

    什么是spring的IOC AOP? - Goluck98的专栏 - 博客频道 - CSDN.NET---看前面的那段http://blog.csdn.net/goluck98/article/det ...

  10. sublime text 3 左侧目录树中文文件夹显示方框问题解决

    0 - 解决方法 打开Preferences->Settings 在弹出的Settings对话框中,加入"dpi_scale": 1.0 重新启动sublime text 3 ...