CSS长度单位分类总结与使用指南

/* 推荐使用rem作为基础单位 */
html {
  font-size: 16px; /* 基础字体大小 */
}
 
body {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  margin: 1rem; /* 16px */
}
 
h1 {
  font-size: 2rem; /* 32px */
  margin-bottom: 1.5rem; /* 24px */
}

/* 使用视口单位创建响应式布局 */
.container {
  width: 90vw; /* 视口宽度的90% */
  max-width: 1200px;
  margin: 0 auto;
}
 
.hero-section {
  height: 100vh; /* 全屏高度 */
  padding: 5vh 5vw; /* 视口相对的内边距 */
}

/* 使用相对单位创建灵活的组件 */
.card {
  padding: 1rem; /* 相对于字体大小 */
  margin: 0.5rem;
  border-radius: 0.25rem;
}
 
.button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border: 2px solid; /* 边框使用px保持清晰 */
}

/* rpx是微信小程序的响应式单位 */
.container {
  width: 750rpx; /* 设计稿宽度，会自动适配不同屏幕 */
  padding: 20rpx;
}
 
.text {
  font-size: 32rpx; /* 字体大小 */
  line-height: 48rpx;
  margin: 16rpx 0;
}
 
.button {
  width: 200rpx;
  height: 80rpx;
  border-radius: 8rpx;
}

/* 注意：em会累积计算 */
.parent {
  font-size: 16px;
}
 
.child {
  font-size: 1.5em; /* 24px */
}
 
.grandchild {
  font-size: 1.5em; /* 36px，不是24px！ */
}

/* 注意：不同属性的百分比参考对象不同 */
.element {
  width: 50%; /* 相对于父元素的宽度 */
  height: 50%; /* 相对于父元素的高度 */
  margin: 10%; /* 相对于父元素的宽度 */
  padding: 10%; /* 相对于元素自身的宽度 */
}

/* 容器查询单位 */
.card {
  container-type: inline-size;
}
 
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem); /* 容器查询单位 */
}

/* 逻辑属性单位 */
.element {
  margin-block: 1rem; /* 块方向边距 */
  margin-inline: 2rem; /* 行内方向边距 */
  padding-block: 0.5rem;
  padding-inline: 1rem;
}