我何时何地使用 px、rem、vw 和 vh

2025-06-10

我何时何地使用 px、rem、vw 和 vh

大家好。

我决定创建一个帖子来分享我对 CSS 中测量单位的观点。

接下来我要讲的都是我在开源和个人项目中学到的东西,也就是通过大量的实践。

我只想谈谈我通常使用的计量单位。需要注意的是,我将要介绍的用例是制作响应式设计

px(像素):px 我只在非常孤立和小的情况下使用它,例如当我想设置固定的字体大小,甚至设置固定的边距和填充时。

px-示例-html

px-示例-css

rem (根 em) :我使用 rem 来表示 px 中的相同元素,但不同之处在于它是可变的或响应性的,例如文本字体和响应式间距。

rem-示例-html

rem-示例-css

vh(视图高度)-vw(视图宽度):这两个测量值是屏幕尺寸的参考,用于测量布局。

vh-vw-示例-html

vh-vw-示例-css

非常感谢你的阅读。
如果你有任何建议,请在评论区告诉我。

鏂囩珷鏉ユ簮锛�https://dev.to/osamaml/when-and-where-i-use-px-rem-vw-and-vh-3bhp
PREV
React Query - 一个实用的例子。欢迎来到 movies-react-query 👋 欢迎来到 movies-react-query 👋
NEXT
使用 Zod 和 TypeScript 在 Express.js 中验证请求数据:综合指南