简介
CSS 尺寸单位 是构建响应式和美观网页设计的基石 。有众多选项如 px、rem、em、vw、vh 等。
1. 像素 (px) ：固定尺寸
px 提供精确控制，设置固定尺寸，非常适合不需要缩放的元素。
示例:
h1 {
font-size: 24px; /* 始终是24像素 */
}
提示：在需要精准度的组件上使用 px，比如边框或图标。
2. 相对单位 (rem & em) ：可扩展且灵活
- rem：相对于根元素（
html）的尺寸，类似“全局设置” 。 - em：相对于父元素的尺寸，类似“局部设置” 。
示例:
html {
font-size: 16px; /* 1rem = 16px */
}
h1 {
font-size: 2rem; /* 2rem = 32px */
}
p {
font-size: 1.5em; /* 如果父元素是 20px，则 1.5em = 30px */
}
规则：使用 rem 保持一致性，用 em 进行局部调整。
3. 视口单位 (vw, vh, vmin, vmax)
- vw：视口宽度的百分比 。
- vh：视口高度的百分比 。
- vmin：
vw或vh中较小的那个 。 - vmax：
vw或vh中较大的那个 。
示例:
div {
width: 50vw; /* 占视口宽度的一半 */
height: 25vh; /* 占视口高度的四分之一 */
font-size: 10vmin; /* 根据较小的维度缩放 */
}
最佳用途：适合创建能随屏幕大小自然调整的响应式布局！
4. 百分比 (%) ：相对于父元素
% 根据父元素的尺寸调整元素大小。
示例:
.container {
width: 100%; /* 占满父元素的宽度 */
}
.child {
width: 50%; /* 占父元素宽度的一半 */
}
提示：使用 % 创建流畅且动态的布局。
5. 限制尺寸 (min-width, max-width, min-height, max-height)
控制元素的最大和最小尺寸。
示例:
div {
width: 80%; /* 灵活宽度 */
min-width: 200px; /* 不小于 200px */
max-width: 600px; /* 不大于 600px */
}
总结
CSS 尺寸单位 （如 px、rem、em、vw、vh 和 %）是创建响应式和动态设计的好帮手 。无论是为智能手机 还是宽屏显示器 设计，掌握这些单位能确保你的布局始终最佳。
评论(0)