web移动端适配

1. 页面Rem 布局适配

  const setRem = () => {
    const deviceWidth = document.documentElement.clientWidth;
    // 获取相对UI稿，屏幕的缩放比例
    const rem = (deviceWidth *100) / 750;
    // 动态设置html的font-size
    document.querySelector('html').style.fontSize =  rem + 'px';
  };

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基准值

2. Viewport 布局适配(推荐使用)

使用 viewport 单位 (vw, vh, vmin, vmax)，使用 postcss-px-to-viewport插件 用于将 px 单位转化为 vw/vh 单位

相比于Rem 布局适配，更加语义化。各大浏览器厂商，对viewport的支持率已经很高，更加完美适配移动端各种屏幕尺寸

3. 普通屏和retina 屏，图片高清的问题 尽量使用图标（不存在window.devicePixelRatio 设备像素比）问题，可以拉伸 html 设置属性data-dpr="2"

   const dpr = devicePixelRatio >= 3? 3: devicePixelRatio >= 2? 2: 1;
   document.documentElement.setAttribute('data-dpr', dpr);
   

   不同data-dpr下，设置图片，使用background-image

   [data-dpr="1"] .img {
    	  background-image: url(image@1x.jpg);
    }
    	
    	[data-dpr="2"] .img {
    	  background-image: url(image@2x.jpg);
    	}
    	  
    	[data-dpr="3"] .img {
    	  background-image: url(image@3x.jpg);
    	}
   

4. iPhoneX 适配方案

   设置网页在可视窗口的布局方式

   <meta name="viewport" content="width=device-width, viewport-fit=cover">
   

   安区区域底部高度

   constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
   env(safe-area-inset-bottom) /* 兼容 iOS >= 11.2 */
   

参考链接： juejin.cn/post/704616…

5. PC 适配 pc 不做vw适配，缩放时样式会不正确。适配 响应式布局 1）flex布局 2）grid布局 3）antdv 的栅格 4）导航菜单使用antdv layout组件breakpoint 响应式布局

5. @media css 样式