移动端适配

flexible+rem

• rem 是相对于 html 节点的 font-size 来做计算的一个相对单位，在运行时动态修改 html 节点的 font-size 大小，从而影响所有使用 rem 单位的布局。
• 375px 的设计稿为 10rem，1rem 为 37.5px
• 一个lib-flexible库,保证在所有资源加载之前执行这个 JS
• html 的 font-size 设置到 12px 以下还是会按照 12px=1rem 来计算，这样所有使用了 rem 单位的尺寸都是错的。
• 媒体查询

  html {
      font-size: 50px;
  }
  @media only screen and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
      html {
          font-size: 37.5px;
      }
  }
  @media only screen and (min-device-width: 360px) and (-webkit-min-device-pixel-ratio: 3) {
      html {
          font-size: 36px;
      }
  }
  

• js

  // set 1rem = viewWidth / 10
  function setRemUnit() {
      const WIDTH = 750 //设计稿宽
      document.documentElement.style.fontSize = (100 * screen.width) / WIDTH + 'px'
  }
  window.onload = function () {
      setRemUnit()
  }
  window.onresize = function () {
      setRemUnit()
  }
  

vw

• vw(viewport's width)：1vw 等于视觉视口的 1%
• h(viewport's height) : 1vh 为视觉视口高度的 1%
• vmin: vw 和 vh 中的较小值
• vmax: 选取 vw 和 vh 中的较大值
• vscode 中使用 px2vw、px-to-vw 插件
• postCSS 的 postCSS-px-to-viewport 插件

  module.exports = {
      plugins: {
          autoprefixer: {},
          'postcss-px-to-viewport': {
              viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
              viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
              unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
              viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
              selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
              minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
              mediaQuery: false, // 允许在媒体查询中转换`px`
          },
      },
  }
  

• 当容器使用 vw，margin 采用 px 时，很容易造成整体宽度超过 100vw，从而影响布局效果。当然我们也是可以避免的，例如使用 padding 代替 margin，结合 calc()函数使用等等...

横屏适配

• js 可以通过 window.orientation 获取屏幕旋转方向，屏幕旋转后页面宽高发生变化，会触发 resize 事件。

  window.addEventListener('resize', () => {
      if (window.orientation === 180 || window.orientation === 0) {
          // 正常方向或屏幕旋转180度
          console.log('竖屏')
      }
      if (window.orientation === 90 || window.orientation === -90) {
          // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
          console.log('横屏')
      }
  })
  

• CSS 也可以检测到屏幕旋转

  @media screen and (orientation: portrait) {
      /*竖屏...*/
  }
  @media screen and (orientation: landscape) {
      /*横屏...*/
  }
  

1px 问题

• 产生原因：移动设备普遍的设备像素比（dpr）为 2 或 3，1pxCSS 像素实际渲染为 2（3）物理像素，所以视觉效果比较粗。注意这里是视觉效果比较粗

• 方案 1 伪元素+transform

  .border_1px:before {
      content: '';
      position: absolute;
      top: 0;
      height: 1px;
      width: 100%;
      background-color: #000;
      transform-origin: 50% 0%;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .border_1px:before {
          transform: scaleY(0.5);
      }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      .border_1px:before {
          transform: scaleY(0.33);
      }
  }
  

  方案 2 border-image 或 background-image（需要切图）

  /* border-image */
  .border_1px {
      border-bottom: 1px solid #000;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .border_1px {
          border-bottom: none;
          border-width: 0 0 1px 0;
          border-image: url(../img/1px_line.png) 0 0 2 0 stretch;
      }
  }
  
  /* background-image */
  .border_1px {
      border-bottom: 1px solid #000;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .border_1px {
          background-image: url(../img/1px_line.png) repeat-x left bottom;
          background-size: 100% 1px;
      }
  }
  

方案 3 使用 SVG 作为 border-image 或者 background-image，需要借助 PostCSS 的 postcss-write-svg 插件

@svg border_1px {
 height: 2px;
 @rect {
   fill: var(--color, black);
   width: 100%;
   height: 50%;
   }
 }
}
.example {
 border: 1px solid transparent;
 border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch;
}

/* 编译后 */
.example {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }