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

PX特点

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

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

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

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

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是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

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

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

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

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

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

用像素（绝对单位）作为单位 -确定：小屏幕显示不全，大屏幕有无意义空白

1. 流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系）。

2. 网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。

3. 布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

4. 设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

5. 这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

1. 弹性布局 -用em和rem作为单位（根据字体百分比强制放大缩小页面）

 只响应几个预设的分辨率模板，只有重新刷新才会根据根据当前切换不同的模板

预设了一些布局样式，根据用户机型判断展示样式 -可通过媒体查询是否一镜到底判断是自适应布局（有分域名）还是响应式布局

自适应布局，预设几个分辨率模板，但其实都把这几个布局都做了的很少，毕竟还有几个布局，增加了开发工作量，大部分只做2-3个布局。

一个页面，根据宽度自动更改布局和样式 ---根据宽度无缝衔接；

总结：希望页面的内容可以完美的适应任何尺寸的屏幕

2010年CSS发布了响应式布局（苹果发布了iphone4，出现了高清屏，之前只有像素屏）

响应式网站：Starbucks Coffee Company

响应式 Vue 页面布局组件-Element Plus

https://zhuanlan.zhihu.com/p/18434713883

Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象实现（Vue 2 使 Object.defineProperty）。
Proxy 的优势：

• 支持动态新增属性（无需 Vue.set）
• 支持数组索引和长度变化
• 性能更好（无需递归遍历对象）

响应式设计中，为不同设备设置“断点”是常见做法。以下是常见设备的屏幕宽度断点：

设备类型                  常用断点范围
超小屏幕    （手机）       max-width: 576px
小屏幕      （ 平板）       min-width: 577px 和 max-width: 768px
中等屏幕     （桌面）        min-width: 769px 和 max-width: 992px
大屏幕        （大桌面）    min-width: 993px 和 max-width: 1200px
超大屏幕       min-width:    1201px

前端Vue3项目响应式布局实战——基于Flex布局和媒体查询的响应式布局设计_vue3响应式布局-CSDN博客