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和r em换算

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';
  }
}

以上就是px和rem的换算关系及在响应式布局中的应用。

px和rpx换算

px(pixel)和rpx(responsive pixel)也都是用于度量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rpx是相对单位,它是相对于屏幕宽度来计算的。在iPhone 6上,屏幕宽度为750px,所以750rpx = 1px。
在iPhone X上,屏幕宽度为1125px,所以1125rpx = 1px。所以,px和rpx的换算关系为:rpx = px × (设备宽度 / 标准宽度)标准宽度一般为750px。例如:
– 在iPhone 6上(屏幕宽度750px):
– 设定元素 width: 150rpx
– 那么这个元素的px宽度就是:150rpx * 750px / 750 = 150px- 在iPhone X上(屏幕宽度1125px):
– 设定元素 width: 150rpx
– 那么这个元素的px宽度就是:150rpx * 1125px / 750 = 225px可以看出,在不同屏幕宽度的设备上,rpx对应的px值会不同,这就是rpx实现响应式的原理。在小程序开发中,我们通常会根据标准宽度750px来设计UI,然后使用rpx作为单位。在不同设备上,rpx会自动转换为对应的px值,实现响应式布局。