摘要：你这个问题很常见，涉及CSS 的长度单位、响应式设计和适配。我给你梳理一下常见单位、换算规则，以及在项目中如何做适配。
你这个问题很常见，涉及 CSS 的长度单位、响应式设计和适配。我给你梳理一下常见单位、换算规则，以及在项目中如何做适配。
1rem = 16px32px = 2rem一般移动端会动态设置根元素的 font-size，比如：
// flexible.js 示例const setRem = => {const baseSize = 16const scale = document.documentElement.clientWidth / 375 // 以设计稿 375px 为基准document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'}window.onresize = setRemsetRem这样页面会随屏幕宽度变化自动适配。
1vw = 屏幕宽度的 1%。
假设设计稿宽度是 375px：
375px = 100vw1px = 100 / 375 ≈ 0.2667vw所以：
/* 设计稿上 20px */width: 20px;/* 转换后 */width: 5.333vw; /* (20/375)*100 */可以配合 PostCSS 插件自动转换（推荐 postcss-px-to-viewport）。
如果父元素 font-size: 16px：
@media screen and (max-width: 768px) {body { font-size: 14px; }}@media screen and (min-width: 769px) {body { font-size: 16px; }}PC 端和移动端分开写规则。适合复杂的多端适配。来源：子琳教育