2022026-4-14 【架构】移动端适配与弱网h5

• 问题1：响应式布局rem模式下，如何保证横竖屏页面字体大小保持一致

  使用自定义字体，保证中英文字体均适配，如果

• pad与移动端

@media screen and (orientation: portrait) {}
Portrait (竖屏): 视口的高度（height）大于或等于 宽度（width）。
Landscape (横屏): 视口的宽度（width）大于 高度（height）。

• 响应式布局方案对比
  postcss-px-to-viewport，不是 rem 方案
  webpack配置

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      ident: 'postcss',
      plugins: [
        require('postcss-px-to-viewport')({
          unitToConvert: 'px', // 需要转换的单位
          viewportWidth: 1080, // 设计稿的视口宽度
          unitPrecision: 3, // 单位转换后保留的精度
          propList: ['*'], // 能转换的vw属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: ['.nopostcss'], // 需要忽略的css选择器
          minPixelValue: 1, // 设置最小的转换数值，如果为1，只有大于1的值才会被转换
          mediaQuery: true, // 媒体查询中是否需要转换单位
          replace: true, // 是否直接更换属性值
          landscape: true, // 是否处理横屏
          landscapeUnit: 'vh', // 横屏时使用vh单位（横屏vh≈竖屏vw）
          landscapeWidth: 1080 // 横屏时的设计稿宽度基准
        })
      ]
    }
  }
},

nuxt 踩坑

• 问题： 从横屏切换竖屏，进入竖屏后最开始字体是比较大的，然后就立马变成了正常字体了，这个体验不太好
• 原因：这是 SSR hydration 阶段样式不匹配导致的闪烁。服务端渲染时用横屏样式，客户端 hydration 后 Vue 重渲染导致媒体查询样式短暂失效。
• 修复方案：在 CSS 中添加 v-cloak 防止闪烁，并确保媒体查询样式在 hydration 期间不被影响。