做UI设计这几年，我见过太多新人死磕像素，结果切图给开发的时候被怼得体无完肤。很多人问，到底网页界面设计使用的单位主要是啥？是px？是rem？还是vw？别急着背答案，这玩意儿没标准答案，只有最适合你当前项目的“活法”。

先说个真事儿。去年我带个实习生，那孩子特认真，PS里量尺寸精确到小数点后两位，给前端的时候全用px标注。结果上线后，老板说要在平板上看看效果，好家伙，字小得像蚂蚁，布局全乱套。那孩子委屈巴巴地找我，我说你咋不早点问？其实不是他技术不行，是思维没转过来。在移动端和响应式网页大行其道的今天，死守px就是自找苦吃。

咱们得搞清楚，网页界面设计使用的单位主要是为了什么？为了适配！为了在不同屏幕、不同分辨率下，内容都能舒服地展示。

如果你做的是那种固定宽度的后台管理系统，或者简单的静态落地页，px确实最直观。设计师画100px，前端写100px，所见即所得，沟通成本最低。但一旦涉及多端适配，px就歇菜了。这时候，rem和em就登场了。

rem是基于根元素字体大小的相对单位。我习惯把根字体设为10px或者16px，这样计算起来方便。比如你要做一个按钮，高度是44px，如果根字体是16px，那在代码里写成2.75rem就行。这样当用户手机字体设置变大时，你的按钮也会跟着变大，体验好很多。不过，rem有个坑，就是如果根字体没设好，或者浏览器默认字体变了，整个页面可能都会乱。

再说说vw和vh，视口单位。这个在H5页面、营销页里用得特别多。比如你要做一个全屏的Banner，直接用100vw和100vh，不管屏幕多宽多高，它都撑满。但这玩意儿也有缺点，就是如果内容太多，超出屏幕，滚动条会出现，体验并不好。所以我一般只在大屏展示、背景图这种地方用，正文内容还是老老实实用rem或者px。

还有一个经常被忽视的单位，就是em。em是相对于父元素字体大小的。这在组件化设计里很有用。比如一个卡片组件，内边距设为1em，那不管这个卡片放在哪里，只要父容器字体大小变了，内边距自动调整。这种“联动”感，是px给不了的。

那到底怎么选？我的建议是：混合使用。别走极端。

1. 基础排版、图标、边框宽度：用px。这些元素通常不需要随字体缩放，保持像素级精确更利于还原设计稿。

2. 布局间距、字体大小、组件尺寸：用rem。这样能保证整体比例协调，适配不同屏幕。

3. 全屏背景、特殊视觉效果：用vw/vh。

我有个客户，做电商APP的，一开始全用px，后来改版，前端改代码改到吐血。后来我们约定，字体和间距用rem，图标和分割线用px。结果效率提升了一倍，bug率也降了不少。

别听那些“专家”说一定要统一用一种单位，那是扯淡。好的设计是灵活的，是懂得在约束中找平衡。你得像厨师一样，根据食材（项目需求）选择调料（单位），而不是死守一道菜谱。

最后给个实在的建议：别光在脑子里想，去写代码试试。哪怕只是写个简单的HTML，用不同的单位调调字体大小，看看在不同浏览器、不同屏幕下的表现。手感出来了，你就懂了。

如果你还在为选单位纠结，或者不确定你的项目适合哪种方案，欢迎来聊聊。我不卖课，就聊聊实际干活的那些事儿，帮你避避坑。

本文关键词：网页界面设计使用的单位主要是