前端单位px、rpx、em、rem、vh、vw、百分比

一.px单位

1.通常用于定义网页元素的大小和位置，固定单位。

.box {
    width: 200px;
    height: 150px;
    border: 1px solid #ccc;
}

二.rpx单位

1.在微信小程序以及uiapp中使用
2.屏幕宽度的适配单位，屏幕宽度被定义为750rpx。因此，1rpx等于屏幕宽度的1/750。

.container {
    width: 600rpx;
    padding: 20rpx;
    font-size: 30rpx;
}

三、em单位

1.相对于父元素字体大小变化。

.parent {
    font-size: 20px;
}
.child {
    font-size: 1.2em; /* 1.2em相当于父元素字体大小的1.2倍，即24px */
    width: 10em; /* 宽度为父元素字体大小的10倍，即200px */
    margin-top: 0.5em; /* 上外边距为父元素字体大小的0.5倍，即10px */
}

四、rem单位

1.是相对于根元素的字体大小来计算的。

html {
    font-size: 16px; /* 默认的根元素字体大小 */
}
.element {
    font-size: 1rem; /* 相当于根元素字体大小（16px） */
    width: 20rem; /* 宽度为根元素字体大小的20倍（320px，如果根元素字体大小是16px） */
    padding: 0.5rem; /* 内边距为根元素字体大小的0.5倍（8px，如果根元素字体大小是16px） */
}

2.js动态计算rem。

// 设置rem函数  
function setRem() {  
  const designWidth = 1920  
  const baseFontSize = 100  
  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;  
  const rem = viewportWidth / designWidth * baseFontSize;  
  document.documentElement.style.fontSize = `${rem}px`;  
}
//初始化时设置rem  
setRem();   
//窗口大小改变时重新设置rem  
window.onresize = function () {  
  setRem();  
};

五、vh、vw单位

1.相对于视口大小的长度单位。

.element {
    width: 50vw; /* 宽度为视口宽度的50% */
    height: 50vh; /* 高度为视口高度的50% */
}

六、百分比单位

1.百分比单位相对于其父元素的特定属性进行计算，使得元素可以根据父元素的大小或其他属性进行动态调整。

.child {
    width: 50%; /* 宽度为父元素宽度的50% */
    height: 75%; /* 高度为父元素高度的75% */
}