前端中常用的单位度量（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）}$