rem方案

1920设计稿1rem=16px

1. 核心适配脚本 (适配 1920px)

将此脚本放在 HTML 的 <head> 标签顶部，确保在页面渲染前完成根字体大小计算，避免视觉闪烁。

<script>
    // 设计稿 1920px 宽度下 1rem = 16px；放在 head 里避免刷新时 rem 闪动
    (function () {
      var h = document.documentElement
      // 设计稿宽度
      var DESIGN_WIDTH = 1920
      // 设计稿1rem = 16px
      var REM_AT_DESIGN = 16
      // 最小字体大小-限制, 同时注意所有的box的大小也有了最小限制
      var MIN_ROOT_FONT_SIZE = 10
      function setRootFontSize() {
        // 当前屏幕可视宽度（每次计算都取最新值）
        var W = h.getBoundingClientRect().width
        var size = (W / DESIGN_WIDTH) * REM_AT_DESIGN
        if (size < MIN_ROOT_FONT_SIZE) size = MIN_ROOT_FONT_SIZE
        h.style.fontSize = size + 'px'
      }
      setRootFontSize()
      var resizeRaf = 0
      window.addEventListener('resize', function () {
        if (resizeRaf) return
        resizeRaf = requestAnimationFrame(function () {
          resizeRaf = 0
          setRootFontSize()
        })
      })
    })()
  </script>

2. px to rem vscode插件转换单位

正常编写样式，使用插件自动转为rem

设计稿可选择rem为单位，复制代码

移动端适配

padding布局
max-width:100%限制宽度
css媒体查询
bootstrap栅格系统布局，断点是响应式设计的构建模块
bootstrap响应式导航

导航展开收起卡顿问题，不要给navbarCollapse写padding

html结构固定格式

 <header class="site-header navbar navbar-expand-md fixed-top">
    <div class="site-header__left">
     xxx
    </div>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
      aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="site-header__right">
        <ul class="header-nav" aria-label="主导航">
          <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">产品创新奖</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">奖项申报</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">常见问题</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于我们</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">联系我们</a>
          </li>
        </ul>
      </div>
    </div>
  </header>