一.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% */
}