rem

最新推荐文章于 2023-07-11 14:46:07 发布
最新推荐文章于 2023-07-11 14:46:07 发布
阅读量156 收藏
点赞数
分类专栏： javacsript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40774743/article/details/107212085
版权

rem布局原理深度理解（以及em/vw/vh）

一、前言

　最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。

二、几个概念

　　这里就不讲那些，物理像素、设备像素比了，可以自己查阅。要去理解rem/em/vm/vh等，首先要直观的去理解他们到底是什么？理解好了，后面就好办了。其实这几个都是css单位，就像我们常用的px一样，只不过他们都是相对单位。我平时使用的百分比单位如：width:100%;就是相对单位。

　　2.1、em

　　em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

　　比如父元素font-size:12px;

　　自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;

　　但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；

       2.2、rem

　　rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

　　比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；

　　如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；

　　2.3、vm/vh

　　vw ： 视口宽度的 1/100；vh ：视口高度的 1/100 —— MDN

　　在pc端，视口宽高就是浏览器得宽高；

　　在移动端，这个还不太一样，不过一般设置：　

1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

　　代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

三、剖析rem布局原理

　　其实好好理解上面的概念，rem的原理也就很简单了。

　　假设我们将屏幕平局分为10份，每一份宽度用一个a表示，即a=屏幕宽度/10;那么：

1

div{width: 5a} /* 屏幕宽度的50% */

但是css中没有a这个单位啊？那怎么办呢？对，css不是有相对单位rem么？我们全可以实现借助rem代替上面的a。如：

1

2

3

4

5

html {font-size: 12px}

div {width: 2rem} /* 24px*/

 

html {font-size: 16px}

div {width: 2rem} /* 32px*/

那么问题来了？怎么让html元素字体大小恒等于屏幕的1/10呢？如ipone6宽是375px,font-size:37.5px;

1

2

html {fons-size: width / 10}

div {width: 5rem} /* 5rem = 5a = 屏幕宽度的50% */

我们用js很容易动态的设置html的font-size恒等屏幕的1/10;我们可以在页面dom ready、resize和屏幕旋转中设置：

1

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

如何把设计稿的像素单位换成以rem为单位呢？可以用一个比例来计算：如设计稿宽度为750px，某个元素量得75px，那么：

75px/750px = 计算所得rem/10rem,所以计算所得rem=75px;所以我们在样式中写width:1rem；实际宽度是75px；同理，如果设计稿总宽度是640px,则1rem=64px。

预处理函数可以简化：

1

2

3

4

5

6

7

8

9

$ue-width: 750; /* 设计稿图的宽度 */

 

@function px2rem($px) {

  @return #{$px/$ue-width*10}rem;

}

 

div {

  width: px2rem(100);/*编译后：  p{width:1.5625rem}*/

}

四、rem万能吗？

　　rem是一种弹性布局，它强调等比缩放，100%还原。它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示，比如媒体查询。

　　字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小？

　　我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小:　　

1

2

html {fons-size: width / 10}

body {font-size: 16px} 　

　　那字体咋整？我们可以用媒体查询和em来实现：　

1

2

3

4

5

6

7

8

9

10

11

@media screen and (min-width: 320px) {

    body {font-size: 16px}

}

@media screen and (min-width: 481px) and (max-width:640px) {

    body {font-size: 18px}

}

@media screen and (min-width: 641px) {

    body {font-size: 20px}

}

 

div {font-size: 1.2em}

　　在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

1

2

3

4

5

6

7

8

9

10

11

12

13

.selector {

    width: 2rem;

    border: 1px solid #ddd;

}

[data-dpr="1"] .selector {

    font-size: 14px;

}

[data-dpr="2"] .selector {

    font-size: 28px;

}

[data-dpr="3"] .selector {

    font-size: 42px;

}

　　当然你也可以给非根元素设置合适的字体。

五、rem布局方案

　　从上可以看出最好的弹性布局方案就是rem+js的方案，《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。

  • 动态改写<meta>标签
  • 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值。
  • 给<html>元素添加font-size属性，并且动态改写font-size的值

　　https://github.com/amfe/lib-flexible：

 

　　

六、em可以用来做弹性布局吗？

　　上面知道，一旦某个节点的字体大小发生变化，其他节点也随之变化，所以不合适，但是用来处理字体还是绝妙的。

七、vw/wh用来做弹性布局怎么样？

　　根据上面说，vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100；感觉已经不用多说了。

1

2

3

4

5

6

/* rem方案 */

html {font-size: width / 10}

p {width: 1.5625rem}

 

/* vw方案 */

p {width: 15.625vw}

如果rem方案中使用设置font-size=width/100就和vm意思一样， 但是比如font-size:640px/100;浏览器不会识别6.4px这么小的字体的。

如果不考虑兼容性问题，可以大胆使用vw/vm做弹性的布局。

 

八、网易考拉触屏版的js+rem的弹性布局方式

其实它可以在body设置一个默认的字体大小的。

https://www.cnblogs.com/leaf930814/p/9059340.html

yakunyang（2016）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中长度单位px、em、rem之间的区别
veritable的博客
06-19 1081
1.基础概念： AngularJS 是一个JavaScript 框架，是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面，并通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。通过script标签添加到网页中： 基础用法 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 各个 ang...
rem适配布局
qq_61718994的博客
03-13 830
学习内容：线性背景渐变；rem基础；媒体查询；媒体查询+rem实现元素动态大小变化，引入资源；less基础 学习笔记： 线性背景渐变 语法1： background： linear-gradient（起始方向，颜色1，颜色2......）； 背景渐变必须添加浏览器私有前缀 起始方向可以是：方位名词或者度数，如果默认省略就是top rem基础 rem单位 rem（root em）是一个相对单位，类似于em，em是父元素字体的大小 不同的是rem的基准是相对于html元素的字体大小。使用h.
如何处理pc端的字体大小的适配问题（完美解决）
热门推荐
殇蓝的博客
04-11 1万+
export const resetPc = () => { var wH = window.innerHeight; // 当前窗口的高度 var wW = window.innerWidth; // 当前窗口的宽度 var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值 if (wW > 1400) { ...
CSS单位之vw、vh、vmin、vmax、%
时光清浅处，一步一安然
02-14 3328
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 870
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
rem适配js文件flexible.js和echartPxToRem.js
02-22
用于页面上使用rem，和echarts使用rem适配
Rem
03-29
我是Arnando 克隆此项目 > git clone https://github.com/Arnando456/Rem 安装依赖项： 在运行以下命令之前，请确保您位于刚刚... > cd REM > bash install.sh 用法 > npm start 社交媒体管理员 谢谢 [ ALLAH SWT ]
rem案例展示
02-11
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间...
css3中rem详解
物以稀为贵yeah
06-15 1623
rem是css3新增的一个属性，它是一个相对单位，直观上可以说：是相对于html元素字体大小的单位。兼容性：大多数浏览器都支持，除了IE8以下不支持，但rem一般多用于移动端页面。 优点：在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算。 1、针对设计稿计算rem 所有浏览器都一致默认保持着 16px 的默认字号，rem与px关系为
CSS3: 神奇的"rem"自适应布局(WebAPP适配神器)
手写我对你的温柔
10-26 1696
一.移动web开发与适配 跑在手机端的web页面(h5页面) 跨平台 基于webview 告别IE，拥抱webkit 1.常见的移动web适配方法： (1).PC: 960px/1000px 居中 盒子模型，定高，定宽 display:inline-block (2).移动web: 定高，宽度百分比 flex Meida Query（媒体查询） 其中flex+Media...
css 中 px em rem % vw vh vm rpx 单位区别
qq_22243075的博客
07-11 1044
什么时候应该使用哪一个单位？
rem解决方案
xiaocuizao的博客
08-20 742
通常我们会在src下面创建一个utils文件夹，存放我们自己封装的文件 将下面的代码存放在utils下 rem.js 然后在入口文件内引入 import utils/rem 这样你就会在body标签上可以查看是否引入成功 成功就可以全局使用了 (function(designWidth, maxWidth) { var doc = document, win = window; var ...
jquery html5 px转成rem_移动端网页总结（flex+rem+flexible）
weixin_34092535的博客
02-03 643
flex +rem移动端网页1.新建项目文件夹： 例如：国美H5 新建一个项目文件夹----------- 国美H5 里面新建 css文件： 移动端初始化样式nomal.css ----- 自己的样式index.css 新建不更换图片的文件夹 ---------- images 新建常换的图片文件夹 ------------ ...
移动端布局(三) rem布局及原理
androidioskl的博客
02-17 9663
什么是rem 首先来了解一下什么是em: 作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。 s1、s2、s5、s6的font-size和line-height分别是多少px? <div class="p1"> <div class="s1">1</div> <div class="s2">1</div> </div> <div class="p2">
移动WEB开发之 rem适配布局 rem单位；媒体查询；Less（CSS预处理器）；flexible淘宝开发的插件
m0_55170432的博客
04-14 456
--------------------- rem 基础 ------------------ 1.1 rem 单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 /根html 为 12px
rem 布局
tradas的博客
06-04 457
<script> window.addEventListener('orientationchange', setRem); window.addEventListener('resize', setRem); setRem(); function setRem() { var html = document.querySelector(...
关于移动端开发宽度高度，字体以及rem宽度使用的总结
hellogoodman的博客
04-07 9108
遇到的问题：如何适配不同的手机屏幕。 简单的说media query可以解决一部分。但是media query目前是照着iphone5/iphone/iphone6s 三个不同尺寸来进行。 如果手机尺寸不在这三个范围之内，那么元素的宽度可以按照百分比来处理，但是高度就不行了。 比如就会出现在轮播图的情况下，原来的高度是写死如iphone5 200px;iphone6 2
转载（web app变革之rem）
weixin_30699741的博客
12-26 734
rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到r...
matlab rem
最新发布
07-28
在Matlab中，rem函数用于计算两个数相除后的余数。具体而言，rem(a,b)返回的是a除以b的余数，其中a是被除数，b是除数。这个函数通常被称为求余运算，可以用表达式r = a - b.*fix(a./b)来表示。需要注意的是，rem函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值