Rem布局的原理解析

我正在参加技能社区创作者签约计划招募活动,点击链接报名投稿。

面试中发现很多人对rem布局的原理不是很清楚,只停留在会运用的阶段,或者理解完全是错误的,本文将给大家讲清楚rem布局的原理,运用计划等常识。

什么是Rem

rem和em很容易混杂,其实appetite两个都是css的单位,而且也都是相对单位,现有的em,css3才引进的rem,在介绍re浏览器怎么打开网站mjava是什么意思之前,咱们先来了解下em。

em作为font-size的单位时,其代表父元素的字体巨细,em作为其他特ios系统点单位时,代表本身字体巨细——MjavaeeDN

我在面试时经常问会一道和em有关的题,来看一下面试者对css细节的了解程度,如下,问s1、s2、s5、s6的fontjava环境变量配置-sizelin浏览器数据如何恢复e-height分别是多少px,先来想一想,结尾处有答案和解说。

<div class="p1">
	<div class="s1">1</div>
  	<div class="s2">1</div>
</div>
<div class="p2">
	<div class="s5">1</div>
  	<div class="s6">1</div>
</div>
.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s1 {font-size: 2em; line-height: 2em;}
.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s5 {font-size: 2em; line-height: 2em;}

em能够让咱们的页面更灵javaee敏,更健壮,比起到处写死的px值,em好像更有张力,改动父元素的字体巨细,子元素会等比例改变,这一改变好像预示了无限可能。

有些人提出用em来做弹性布局页面,但其杂乱的核算让人诟病,甚至有人专门做了个px和emios下载的核算器,不同节APP点像素值对应的em值,o(╯□╰)o。

Rem布局的原理解析

em做弹性布局的缺陷还在于牵一发而动全身,一旦某个节点的字体巨细发生改变,那么其子孙元素都得从头核算,X﹏X。

rem作用于非根元素时,相对于根元素字体巨细;rem作用于根元素字体巨细时,相对于其出初始字体巨细——MDN

rem取值分为两种状况,设置在根元素时和非根元素时,举个比方:

/* 作用于根元素,相对于原始巨细(16px),所以html的font-size为32px*/
html {font-size: 2rem}
/* 作用于非根元素,相对于根元素字体巨细,所以为64px */
p {font-size: 2rem}

rem有rem的长处,em有em的长处,尺有所approach短,寸有所长,我一向不觉得技能没有什么对错,只要合适不合适,有对错的是运用技能的人,杰出与优异的差异就在于能否挑选合适的技能,并让其发挥优势。

我一向觉得em便是为字体和行高而生的,有些时候子application元素字体就应该相对于父元素,appstore元素行高就应该相对于字体巨细;而rem的有点在于js代码统一的参考系。

Rem布局原理

rem布局的实质是什么?这是我问过很多人的一个问题,但得到的回答都差强人意。

其实rem布approach局的实质是等比缩放,一般是基于宽度,试想一下假如UE图能浏览器历史上的痕迹在哪里够等比缩放,那该多么美好啊。

假定咱们将屏幕宽度均匀分红100份,每一份的宽度用x表明,x = 屏幕宽度 / 100,假如将x作为单位,x前面的数值就代表屏幕宽度的百分比。

p {width: 50x} /* 屏幕宽度的50% */

假如想要页面元素跟着屏幕宽度js代码ios下载比改变,咱们需求上面的x单位,不幸浏览器的是css中并没有这样的单位,走运的是在css中有rem,经过rem这个桥梁,能Java够完成神奇的xapplication

经过上面对rem的介绍,能够发现,假如子元素设置rem单位的特点,经过更改html元素的字体巨细,就能够让子元素实践巨细发生改变

html {font-size: 16px}
p {width: 2rem} /* 32px*/
html {font-size: 32px}
p {width: 2rem} /*64px*/

假如让html元素字体的巨细,恒等于屏幕宽度的1/100,那1rem和1x就等价了

html {fons-size: width / 100}
p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */

怎么让html字体巨细一向等于屏幕宽度的百分之js代码大全一呢? 能够经过js来设置,一般需求在页面dom ready、resize和屏幕旋转中设置

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

那么怎么把UE图中的获取的像素单位的值,javascript转换为已rem为单位的浏览器数据如何恢复值呢?公式是元素宽度 / UE图宽度 * 100,让浏览器历史上的痕迹在哪里咱们举个比方,假定UE图尺度是640px,UE图中的一个元素宽度是100px,根据公式100/640*100 = 15.625

p {width: 15.625rem}

下面来验js代码证下上appstore面的核算是否正确,下面的表格是UE图等比缩放下,元素的宽度

UE图宽度UE图中元素APP宽度
640px100px
480px75px
320px50px

下面的表格是经过咱们的元素在不同屏幕ios16宽度下apple的核算值

页面宽度html字体巨细p元素宽度
640px640/100 = 6.4px15.625*6.4=Java100px
480px480/100=4.8px浏览器推荐15.6appearance25*4.8=75p浏览器数据如何恢复x
320px320/100=3.2px15.625*3javascript.2=50px

能够发现,UE图宽度和屏幕宽度相一起,两头得出的元素宽度是共同的

上面的核算进程有些繁琐,能java怎么读够经过预处理的function来简化进程,下面是sass的比方,less相appointment

$ue-width: 640; /* ue图的宽度 */
@function px2rem($px) {
  @return #{$px/$ue-width*100}rem;
}
p {
  width: px2rem(100);
}

上面的代码编译完的成果如下

p {width: 15.625rem}

其实有了postcss后,这个进程应该放到postcss中,源代码如java语言

p {width: 100px2rem}

postcss会对px浏览器推荐2rem这个单位进行处理,处理后的成果如下浏览器,感兴趣的话来写一个px2rem的postcss插件吧

p {width: 15.625rem}

比Rem更好的计划

上面说到想让页面元素跟着页面宽度改变,需求一个新的单位x,浏览器历史记录设置x等于屏幕宽度的百分之一,css3带来了rem的一起,也带来了vw和vh

vw —— 视口宽度的 1/100;vapproveh —— 视口高javaee度的 1/100 —— MDN

聪明的你或许一经发现,这不便是单位x吗,没错根据定义能够发现1vw=1appearancex,有了vw咱们完全能够绕过rem这个中介了,下面两种计划是等价的,能够看到vw比reapplem更简单,毕竟rem是为了完成vw么

/* rem计划 */
html {fons-size: width / 100}
p {width: 15.625rem}
/* vw计划 */
p {width: 15.625vw}

vw还能够和rem计划结合,这样核算htapproveml字体巨细就不需求用js了

html {fons-size: 1vw} /* 1vw = width / 100 */
p {width: 15.625rem}

尽管vw各种长处,可是vw也有缺陷,首要vw的兼容性java编译器不如rem好,运用之前要看下

兼容性Ios安卓
rem4.1+2.1+
vw6.1+4.4+

浏览器数据如何恢复外,在运用弹性布局时,一般会约束最大宽度,比方在pc端检查咱们的页面,此时vw就无法无能为力了,由于除了width有max-width,其他单位都没有,而rem能够经过控制html根元素的ios下载font-size最大值,而轻松处理这个问题

Rem不是银弹

rem是弹性布局的一种完成方法ios应用商店,弹性布局能够算作呼应式布局的一种,但呼应式布局不是弹性布局,弹性布局强调等比缩放,100%复原;呼应式布局强调不同屏幕要有不同的显示,比方媒体查询

用户挑选大屏幕有两个出发点,有些人想要更大的字体,更大的图片,比方老花眼的我;有些人想要更多的内容,并不想要更大的图标。

我认为一般内容型的网站,都不太合适运用rem,由于大屏用户能够自己挑选是要更大appointment字体,还是要更多内容,一旦运用了rem,就掠夺了用户的自由,比方百度知道apple,百度经历都没有运用rem布局;一些偏向app类的,图标ios越狱类的,图片类的,比方淘宝,活动页面,比较合适运用rem,由于调大字体时并不能调大图标的巨细

remios15能够appearance做到100%的复原度,但搭档rem的java语言制作本钱也更大,一起运用java编译器rem还有一些问题,下面咱们一一列举下:

首要是字体的问题,字体巨细并不能运用rem,字体的巨细和字体宽度,并不成线性关系js代码大全,所以字体巨细不能运用rem;由于设置了根元素ios应用商店字体的巨细,会影响一切没有设置字体巨细的元素,由于字体巨细是会继承的,难道要每个元素都显示设置字体巨细???

咱们能够在body上做字体批改,比java面试题方把body字体浏览器历史上的痕迹在哪里浏览器数据如何恢复细设置为1ios是什么意思6px,但假如appearance用户自己设置了更大的字体,此时用户的设置将失效,比方合理的方法是,将其java怎么读设置为用户的默许字体巨细

html {fons-size: width / 100}
body {font-size: 16px}

那字体的巨细怎么完成呼应式呢?能够经过批改body字体的巨细来完成,一起一切设置字体巨细的地方都是用em单位,对便是em,由于只要em才能完成,同步改变,我早就说过em便是为字体而生的

@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}
}
p {font-size: 1.2em}
p a {font-size: 1.2em}

第二,假如用户在PC端浏览,页面过宽怎么办?一般咱们都会设置一个最大宽度,大于这个宽度的话页面居中,两头留白

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';

设置body的宽度为100rem,并水平居中

body {
	margin: auto;
	width: 100rem
}

第三,假如用户禁用了js怎么破?其实这种用户真不多了,要java面试题不放弃吧。。浏览器的历史

首要能够增加noscript标签提示用户

<noscript>敞开JavaScript,取得更好的体会</noscript>

给html增加一个320时的默许字体巨细,确保页面能够显示

html {fons-size: 3.2px}

假如你想要更好的体会,不如增加媒体查询吧

@media screen and (min-width: 320px) {
	html {font-size: 3.2px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
	html {font-size: 4.8px}
}
@media screen and (min-width: 641px) {
	html {font-size: 6.4px}
}

rem不是浏览器推荐银弹,这个世上也没有银弹,每个计划都有其长处,也有其缺陷,学会做出挑选和妥协

Rem布ios下载局计划

经过上面能够得出最好的弹Java性布局计划是,rem+js计划,一起还要处理noscript问题,处理字体问题,apple处理屏幕过宽问题

可是上面的计划js代码大全还有个问题,便是分红100份的话,假定屏幕宽度320,此时htmappointmentl巨细是3.2px,但浏览器支持最小字体巨细是12px,怎么办?那就分红10份呗,只要把上面的100都换成10就好了

下面给一个完好的比方,css的核算没有运用预处理器,这个很简单appointment

hios模拟器tml代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>rem布局</title>
</head>
<body>
    <noscript>敞开JavaScript,取得更好的体会</noscript>
    <div class="p1">
        宽度为屏幕宽度的50%,字体巨细1.2em
        <div class="s1">
            字体巨细1.2.em
        </div>
    </div>
    <div class="p2">
        宽度为屏幕宽度的40%,字体巨细默许
        <div class="s2">
            字体巨细1.2em
        </div>
    </div>
</body>
</html>

css代码如下

html {
    font-size: 32px; /* 320/10 */
}
body {
    font-size: 16px; /* 批改字体巨细 */
    /* 避免页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 避免页面过宽 */
    outline: 1px dashed green;
}
/* js被制止的回退计划 */
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}
noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被制止的回退计划 */
.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}
.p1 {
    width: 5rem;
    height: 5rem;
    font-size: 1.2em; /* 字体运用em */
}
.s1 {
    font-size: 1.2em; /* 字体运用em */
}
.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字体运用em */
}

js代码如下

var documentElement = document.documentElement;
function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780,不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
}
document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

页面作用如下,完好的比方在这里

Rem布局的原理解析

总结

假如对本文有什么疑问ios模拟器,欢迎留言评论;假如觉得本文对你有协助,那就赶紧点赞吧。

发表评论

提供最优质的资源集合

立即查看 了解详情