px与rem和rpx的换算以及应用场景

本文介绍: px(pi x el)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1p x 对应不同的物理尺寸,所以不适合用于响应式布局。r em是相对单位,它是相对于根元素的字体大小来计算的。所以,如果html的font–size是16p x,则1r em = 16p x。如果html的font–size是20px,则1r em = 20px。

px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html&g t;的字体大小来计算的。
所以,如果html的font–size是16px,则1rem = 16px。
如果html的font–size是20px,则1rem = 20px。所以,px和re m的换算关系公式为:px = re m × font–size of <html> 例如:
– 如果html的font–size是16px
– 设定元素 width: 10rem
– 那么这个元素的px宽度就是:10rem * 16px = 160px在实际开发中,我们通常会给<html>元素设置不同的font–size,以适配不同屏幕:- 在大屏幕上,给<html>设置较大的font–size,例如20px,那么1rem = 20px
– 在小屏幕上,给<html>设置较小的font–s ize,例如10px,那么1rem = 10px这样,我们在设计稿上量取的rem单位,可以在不同屏幕上显示不同的px值,达到响应式效果。推荐的<html>字号设置方式有:1. 媒体查询设置:

css
html {
  font-size: 16px;  /* 默认16px */
}

@media (min-width: 768px) { 
  html {
    font-size: 20px; 
  }
}

2. 使用视口单位vw设置:

css
html {
  font-size: 5vw;  /* 视口宽度的5% */
}

3. 使用 javascript 动态设置:

js
function setFontSize() {
  var winWidth = document.documentElement.clientWidth;
  if (winWidth >= 1920) {
    document.documentElement.style.fontSize = '100px';
  } else if (winWidth >= 1600) {
    document.documentElement.style.fontSize = '90px';
  } else if (winWidth >= 1366) {
    document.documentElement.style.fontSize = '80px';
  } else {
    document.documentElement.style.fontSize = '16px';
  }
}