px和rem换算
px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html>的字体大小来计算的。
所以,如果html的font-size是16px,则1rem = 16px。
如果html的font-size是20px,则1rem = 20px。所以,px和rem的换算关系公式为:px = rem × 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-size,例如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值,实现响应式布局。
