前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应

前端中常用的单位度量

1. px（像素）
   • 定义：px是pixel的缩写，它是一个绝对单位，是屏幕上能显示的最小物理单位。例如，在显示器上，一个像素点就是一个px。
   • 应用场景：
     • 当需要精确控制元素的尺寸，特别是在一些对布局精度要求较高的设计场景中，如图标设计、小型组件（按钮等）的尺寸定义等。例如，设计一个直径为30px的圆形图标，这种情况下px可以很好地满足精确尺寸的要求。
     • 在一些固定布局的网页或者应用中，比如简单的宣传页面，其中的文字大小、图片尺寸等如果不需要根据设备屏幕大小自适应，使用px来定义是比较方便的。
2. rpx（响应式像素）
   • 定义：rpx是微信小程序特有的单位，它可以根据屏幕宽度进行自适应调整。规定屏幕宽度为750rpx，这样在不同尺寸的手机屏幕上，rpx会自动换算成对应的像素值。例如，在iPhone 6中，屏幕宽度为375px，此时1rpx = 0.5px；在iPhone 6 Plus中，屏幕宽度为414px，1rpx的实际像素值会相应变化。
   • 应用场景：
     • 主要应用于微信小程序开发。在开发小程序界面时，使用rpx可以让界面在不同型号的手机上保持相对一致的布局效果。比如，设计一个小程序的列表项高度为80rpx，那么不管是在小屏幕手机还是大屏幕手机上，列表项的高度都会根据屏幕宽度自动适配，不会出现布局错乱的情况。
3. rem（根元素字体大小相对单位）
   • 定义：rem是相对于根元素（html）字体大小来计算的单位。例如，如果根元素（html）的字体大小设置为16px，那么1rem = 16px；如果将根元素字体大小设置为20px，1rem就等于20px。
   • 应用场景：
     • 常用于网页的响应式布局。通过设置根元素字体大小，并根据rem来定义其他元素的尺寸，可以很方便地实现整个页面的字号和元素大小的整体缩放。例如，在一个网页中，将根元素字体大小设置为10px，然后将标题的字体大小定义为2rem，那么标题的实际字体大小就是20px。当需要调整页面整体字号时，只需要改变根元素的字体大小，所有使用rem定义的元素尺寸都会相应改变。
     • 对于一些需要根据用户设置（如浏览器字体大小设置）来灵活调整布局的网页，rem也是一个很好的选择。
4. em（相对单位）
   • 定义：em是相对于父元素字体大小来计算的单位。如果一个元素的父元素字体大小为16px，那么对于这个元素来说，1em = 16px。它会继承父元素的字体大小属性。
   • 应用场景：
     • 在文本排版中，当需要根据上下文的字体大小来设置相对比例的字号时可以使用em。例如，在一个段落中，正文的字体大小为16px（1em），想要设置其中引用部分的字体大小为正文的0.8倍，就可以将引用部分的字体大小设置为0.8em。
     • 对于一些具有嵌套结构的文本内容，em可以方便地实现字号的逐级缩放，使得文本层次更加分明。不过，由于它是相对于父元素的，在复杂的布局中可能会因为多层嵌套而导致计算复杂，需要谨慎使用。
5. vw（视口宽度百分比单位）
   • 定义：vw是viewport width的缩写，表示视口宽度的百分比。1vw等于视口宽度的1%。例如，在一个宽度为1000px的视口中，1vw = 10px。
   • 应用场景：
     • 用于创建完全自适应视口宽度的布局。比如，在设计一个全屏的网页轮播图时，可以将轮播图的宽度设置为100vw，这样不管视口宽度如何变化，轮播图都能铺满整个屏幕宽度。
     • 对于一些需要根据屏幕宽度按比例分配空间的模块布局，vw是一个很好的选择。例如，将一个网页的侧边栏宽度设置为30vw，主内容区域宽度设置为70vw，这样在不同屏幕宽度下，两边的区域都能按照比例自适应。
6. vh（视口高度百分比单位）
   • 定义：vh是viewport height的缩写，表示视口高度的百分比。1vh等于视口高度的1%。例如，在一个高度为600px的视口中，1vh = 6px。
   • 应用场景：
     • 与vw类似，主要用于自适应视口高度的布局。例如，在设计一个高度自适应的单页应用（SPA）的页面时，可以将页面的各个部分（如导航栏、内容区、页脚等）的高度用vh来定义，使得页面在不同设备的屏幕高度下都能有良好的布局效果。
     • 在一些需要垂直方向自适应的场景，如垂直滚动的长页面中的某些固定高度比例的模块，使用vh可以方便地实现自适应。比如，设置一个视频播放区域的高度为50vh，这样它会始终占据屏幕高度的一半，为用户提供一致的视觉体验。

vw/vh 的场景应用

1. 网页布局设计
   • 全屏模块布局
     • 在创建全屏的网页页面时，vw和vh单位非常有用。例如，设计一个单页网站，首页通常希望背景图或者背景色能够铺满整个屏幕。此时，可以将body或相关的容器元素的高度设置为100vh，宽度设置为100vw，这样就能确保无论用户使用何种设备访问，页面都能完全覆盖屏幕，提供沉浸式的视觉体验。
   • 分屏布局
     • 当需要将页面划分为不同比例的部分时，vw和vh可以很好地实现这个目标。比如，要创建一个具有固定比例侧边栏和内容区域的网页布局。可以将侧边栏的宽度设置为30vw，内容区域的宽度设置为70vw。在垂直方向上，如果希望有一个固定高度的头部（如导航栏）和一个自适应剩余高度的内容区，可以将导航栏的高度设置为20vh，内容区的高度设置为80vh。这种布局方式能够在不同屏幕尺寸的设备上（如桌面显示器、笔记本电脑、平板电脑和手机）保持各部分的比例相对稳定。
2. 响应式图片和视频展示
   • 图片展示
     • 在展示大型图片（如产品图片、画廊图片等）时，为了让图片在不同设备上都能有较好的展示效果，可以使用vw和vh单位来控制图片的尺寸。例如，将图片的最大宽度设置为100vw，这样图片就不会超出屏幕宽度，避免用户需要水平滚动来查看完整的图片。如果希望图片在高度上也能自适应，可以将其高度设置为与宽度成一定比例，例如，设置高度为70vw（假设希望图片的宽高比为10:7），这样图片就能根据屏幕宽度自动调整大小，并且保持合适的比例。
   • 视频播放
     • 对于视频播放区域，同样可以使用vw和vh来实现自适应。比如，在一个在线课程网站或者视频分享平台上，将视频播放器的宽度设置为90vw，高度设置为50vh，这样视频播放器能够在不同设备上占据合适的屏幕空间，提供良好的观看体验。而且，当用户旋转设备时，视频播放器的尺寸也能根据新的视口尺寸自动调整。
3. 移动应用和小程序布局（部分情况）
   • 在一些基于WebView的移动应用或者小程序开发中，如果希望界面能够更好地适配设备屏幕，vw和vh单位也可以发挥作用。例如，在一个混合式移动应用的某个页面中，要设计一个信息展示卡片，卡片的宽度可以设置为80vw，高度根据内容和设计需求（如设置为40vh）来确定，这样卡片在不同尺寸的手机屏幕上都能有合适的大小，并且布局相对稳定。不过需要注意的是，在移动原生应用开发中，可能会有更适合的布局方式和单位，但在某些特定场景下结合vw和vh可以提供额外的布局灵活性。
4. 数据可视化和图表展示
   • 在数据可视化领域，例如制作柱状图、折线图、饼图等图表时，vw和vh单位有助于图表在不同设备上的适配。如果希望图表能够自适应屏幕大小，可以将图表的容器（如div元素）的宽度设置为90vw，高度设置为70vh。这样，无论是在大屏幕的监控显示器还是小屏幕的移动设备上，图表都能根据视口大小自动调整尺寸，保证数据能够清晰地展示，同时也不会因为尺寸问题而导致布局混乱。

px/rem/em 之间的转换关系

1. px与rem的转换关系
   • 基本原理：rem是相对于根元素（html）字体大小来计算的单位。假设根元素（html）的字体大小设置为$F$px，那么$1$rem = $F$px。例如，如果根元素字体大小是$16$px，那么$1$rem就等于$16$px。
   • 转换公式：若要将px转换为rem，公式为$rem=\frac{px}{根元素字体大小（px）}$。例如，一个元素的宽度是$32$px，根元素字体大小为$16$px，那么这个元素的宽度用rem表示就是$32÷16=2$rem。反之，若要将rem转换为px，公式为$px=rem\times 根元素字体大小（px）$。
2. px与em的转换关系
   • 基本原理：em是相对于父元素字体大小来计算的单位。设父元素字体大小为$P$px，那么对于该父元素下的子元素，$1$em = $P$px。例如，父元素字体大小为$12$px，那么子元素的$1$em就是$12$px。
   • 转换公式：若要将px转换为em，公式为$em=\frac{px}{父元素字体大小（px）}$。例如，一个元素的字体大小是$18$px，其父元素字体大小为$12$px，那么这个元素的字体大小用em表示就是$18÷12=1.5$em。反过来，若要将em转换为px，公式为$px=em\times 父元素字体大小（px）$。
3. em与rem的转换关系（复杂情况）
   • 没有嵌套关系的简单情况：如果元素没有嵌套，或者所有元素的父元素字体大小都和根元素字体大小相同，那么em和rem可以简单地进行转换。例如，根元素（html）字体大小为$16$px，此时$1$rem = $1$em。
   • 嵌套情况下：假设根元素字体大小为$F$px，某元素的父元素字体大小为$P$px。该元素用em表示的尺寸为$E$em，转换为rem的公式为$rem=\frac{E\times P}{F}$。例如，根元素字体大小为$16$px，一个元素的父元素字体大小为$12$px，这个元素的字体大小为$1.5$em，转换为rem就是$\frac{1.5\times 12}{16}=1.125$rem。

项目中的rem 应用

1. 网页字体大小设置
   • 整体字号控制
     • 在网页开发中，通过将根元素（html）的字体大小设置为一个相对合理的值（如10px或16px），然后使用rem单位来定义其他元素的字体大小。例如，对于网页中的标题元素h1，可以将其字体大小设置为2rem，如果根元素字体大小为16px，那么h1的字体大小就是32px。这样，当需要调整整个网页的字体大小时，只需改变根元素的字体大小，所有基于rem定义的字体大小都会相应地改变，实现了网页字体大小的整体缩放，方便用户根据自己的喜好或者设备的显示情况（如视力不好的用户可能希望增大字体）进行调整。
   • 不同级别标题字号设置
     • 可以根据文档结构和设计需求，使用rem为不同级别的标题设置字号。例如，h1设置为2rem，h2设置为1.6rem，h3设置为1.3rem等，形成一个层次分明的标题字号体系。这样，在不同的页面或者模块中，标题的字号比例关系保持一致，有助于提高网页内容的可读性和视觉层次。
2. 网页布局尺寸定义
   • 容器尺寸设定
     • 对于网页中的各种容器元素，如div、section等，使用rem来定义它们的宽度和高度是实现响应式布局的一种有效方式。例如，设计一个内容区域，将其宽度设置为60rem，如果根元素字体大小为10px，那么这个内容区域的宽度就是600px。当根元素字体大小改变时，内容区域的宽度也会随之改变，从而适应不同屏幕尺寸和用户偏好。
   • 组件尺寸调整
     • 在网页组件（如按钮、输入框等）的开发中，rem单位可以确保组件在不同的页面环境下保持合适的大小。例如，设计一个按钮，其宽度为1.5rem，高度为0.8rem，按钮内文字大小为0.6rem。这样，按钮的尺寸和文字大小会根据根元素字体大小进行自适应调整，无论是在大屏幕还是小屏幕设备上，按钮的比例和可读性都能得到较好的保证。
3. 响应式网页适配不同设备
   • 适配多种屏幕分辨率
     • 随着移动设备的多样化，屏幕分辨率也各不相同。使用rem单位可以方便地让网页在不同分辨率的设备上进行适配。例如，在桌面浏览器上，根元素字体大小可能设置为16px，而在移动设备上，通过媒体查询（@media）可以将根元素字体大小调整为10px。这样，基于rem定义的所有元素尺寸都会相应地在移动设备上变小，实现了网页从桌面到移动设备的自适应转换，避免了在小屏幕设备上出现布局混乱或者元素过大的问题。
   • 适配不同的设备方向
     • 当用户旋转设备（如从竖屏变为横屏）时，网页布局也需要相应地调整。通过rem单位和适当的媒体查询，可以根据设备的方向改变根元素的字体大小，进而调整网页中所有元素的尺寸。例如，在竖屏时根元素字体大小为10px，当设备旋转为横屏时，可以将根元素字体大小增加到12px，使得网页中的元素在横屏模式下能够更好地利用屏幕空间，同时保持布局的合理性。

根元素 font-size 设置为16px 的应用惯例

1. 浏览器默认设置的影响
   • 大多数浏览器的默认font - size值是16px。这是一种行业惯例，用户在浏览网页时已经习惯了这种默认的文字大小。如果将根元素font - size定义为16px，在没有特别设置其他元素字体大小的情况下，网页的文本呈现会比较符合用户的预期，不需要用户进行额外的缩放操作来正常阅读内容。
2. 计算方便性
   • 16px是一个相对容易计算的数值。在进行rem单位和px单位之间的转换时，如果根元素font - size为16px，那么1rem = 16px。例如，将一个元素的字体大小设置为2rem，很容易计算出它的实际字体大小是32px（$2\times 16=32$）。这种简单的倍数关系方便了开发者在设计网页布局和字体大小时进行快速的换算和调整。
3. 响应式设计的灵活性
   • 在响应式网页设计中，以16px作为根元素font - size的起始值，能够方便地通过媒体查询（@media）来调整字体大小。例如，当屏幕尺寸变小（如从桌面端切换到移动端）时，可以通过媒体查询将根元素font - size按比例减小，如设置为12px或10px。基于rem单位的其他元素尺寸和字体大小也会相应地按比例缩小，从而实现了网页在不同设备上的自适应布局，同时保持了相对合理的文字显示效果。
4. 与其他单位的兼容性
   • 在和其他单位（如em）结合使用时，如果根元素font - size为16px，可以更好地协调不同单位之间的关系。因为em是相对于父元素字体大小的单位，而在没有特别设置父元素字体大小的情况下，很多元素会继承根元素的字体大小特性。这样，在使用rem和em进行布局和字体大小设置时，可以更容易地理解和控制它们之间的相互作用，减少因为单位换算混乱而导致的布局问题。

自适应之图片应用

要实现图片自适应展示、保证图片显示不变形、等比缩放且居中展示，可以使用CSS来实现。以下是几种常见的方法：

1. 使用 max-width 和 max-height

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>img {max - width: 100%;max - height: 100%;display: block;margin: 0 auto;}</style>
</head><body><img src="your-image-url.jpg" alt="示例图片">
</body></html>

• 原理：max - width: 100% 确保图片宽度不会超过其父容器的宽度，max - height: 100% 确保图片高度不会超过其父容器的高度。display: block 将图片转换为块级元素，margin: 0 auto 使图片在水平方向上居中显示。

2. 使用 object-fit 属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>.img-container {width: 100%;height: 400px;/* 设置一个固定高度，也可以根据需求调整 */display: flex;justify-content: center;align-items: center;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head><body><div class="img-container"><img src="your-image-url.jpg" alt="示例图片"></div>
</body></html>

• 原理：object-fit: contain 会保持图片的纵横比，并将图片缩放到在指定的容器内尽可能大，同时保证图片的完整显示。通过设置父容器（.img-container）的 display: flex，justify-content: center 和 align-items: center，实现图片在父容器内水平和垂直居中。

3. 使用 background-image 模拟图片展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>.img - container {width: 100%;height: 400px;background - image: url('your-image-url.jpg');background - size: contain;background - position: center;background - repeat: no - repeat;}</style>
</head><body><div class="img-container"></div>
</body></html>

• 原理：background-size: contain 使背景图片在保持纵横比的情况下尽可能大，同时完全适应容器。background-position: center 将背景图片在容器内居中显示，background-repeat: no-repeat 确保图片不会重复显示。这种方法适用于不需要对图片添加HTML元素交互（如点击链接等）的场景。