发表于： 2019-10-05 21:45:48

1 4327

今日完成:

px、em、rem区别介绍

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将原来的px数值除以10，然后换上em作为单位就行了。

所以在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em）这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

p {font-size:14px; font-size:.875rem;}

px 与 rem 的如何选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

根元素就是在最顶端的，没有父节点的元素！

指的是整个文档树里

没有父元素的为根

（不分析老IE对根认定问题）

实际上浏览器实现中

（前端）对根是（几乎）无法用样式修改触及的

基本等同于视口

在 HTML 中是 html 元素

关于rem具体使用方法:

Bootstrap4

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

我们也可以根据自己的需要，定义列数：

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

网格类

Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

Bootstrap4 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

使用行来创建水平的列组。

内容需要放置在列中，并且只有列可以是行的直接子节点。

预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。

Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。

以下各个类可以一起使用，从而创建更灵活的页面布局。

Bootstrap 4 网格的基本结构

1.

</div>

</div>

创建一行(<div class="row">)。然后，添加是需要的列( .col-*-* 类中设置)。第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

2.

</div>

不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等：两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，可以使用 .col-sm|md|lg|xl 来设置列的响应规则。

如:

</div>