平板网页开发，px vs rem + 适配方案

劉三岁2026-04-15 13:17

必须做适配，优先用 rem /em/vw 做弹性布局，px 只用于边框、阴影等不需要缩放的细节，纯 px 写死绝对不推荐。

一、先搞懂两个单位的区别

1. px（固定像素）

绝对单位，写多少就是多少，不会随屏幕 / 字体大小变化
适合：边框、1px 细线、阴影、图标固定大小
缺点：平板横屏 / 竖屏、不同尺寸平板（7 寸 / 10 寸 / 12 寸）会拉伸变形、文字忽大忽小、布局错乱

2. rem（相对根节点字体大小）

相对单位：1rem = html 标签的 font-size
核心优势：一套代码适配所有平板 / 手机 / PC，自动等比缩放
适合：文字、间距、宽高、padding、margin 等所有核心布局

方案：rem + 动态根字体（最稳、最通用）

1. 核心适配逻辑

以设计稿宽度（比如 768px 平板设计稿）为基准，自动计算 html 的 font-size，所有元素用 rem 写。

2. 开箱即用适配代码（直接复制到项目,vue项目直接放在index.html中）

复制代码

<script>
      // 移动端 / 平板自适应适配（基准 16px，与 Tailwind rem 单位对齐）
      (function flexible(window, document) {
        const docEl = document.documentElement
        const designWidth = 768 // 平板设计稿宽度

        function setRemUnit() {
          let clientWidth = docEl.clientWidth
          // 限制最小/最大宽度，避免 PC 端过大
          clientWidth = Math.max(375, Math.min(clientWidth, 1200))
          // 基准：1rem = 16px（设计稿上量多少，直接 ÷16 就是 rem）
          docEl.style.fontSize = (clientWidth / designWidth) * 16 + 'px'
        }
        setRemUnit()
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', setRemUnit)
      })(window, document)
    </script>

3. 使用方式（超级简单）

设计稿量出来：宽度 320px → 写 20rem
设计稿字体：32px → 写 2rem
边框 / 细线：直接用 px
tailwind ，也可以搭配tailwind用