20190303 移动端适配viewport、vw、rem、媒体查询

viewport

• 概念

  viewport是用户网页的可视区域，又叫做‘视区’。

  比如我们有时使用移动设备访问pc端页面的时候会看到一个横向的滚动条，这里的可显示区域的宽度就是viewport的宽度。

• 属性

  width: 控制 viewport 的大小，比如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• initial-scale: 初始（页面第一次load）缩放比例
• user-scalable: 是否允许手动缩放

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" />

VW方案

比如：设计稿 750px； 100vw = 750px； 1vw = 7.5px；把视觉稿的px用vw解决。

将px单位转换成vw单位的方法，使用

postcss-px-to-viewport

{
viewportWidth: 750, // 视口宽度
viewportHeight: 1334, // 视口高度
unitPrecision: 5, // 保留位数
viewportUnit: 'vw', // 希望使用的视口单位
selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器，保留原本单位，不会转为视口单位
minPixelValue: 1, // 设置最小的转换数值为1，只有大于1的值会被转换
mediaQuery: false // 媒体查询里的单位不需要转换单位
}

更多配置参考：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

解决元素容器宽高比问题：

postcss-aspect-ratio-mini

解决1px的问题：

postcss-write-svg

iPhone X 适配:

1. meta标签

   viweport-fit

   属性，让页面内容完全覆盖整个窗口
2. “刘海儿” 和 底部小黑条遮挡问题，在CSS中配置

   constant(safe-area-inset-*)

   以及

   env(safe-area-inset-bottom)

rem

• 概念

  使用rem单位的元素会根据不同屏幕设定好的根元素的font-size自动显示相应的尺寸。

• rem的计算

  const oHtml = document.getElementsByTagName('html')[0]
  const width = oHtml.clientWidth;
  // 320px的屏幕基准像素为12px
  oHtml.style.fontSize = 12 * (width / 320) + "px";

  使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度,既然是JS代码，为了避免造成因为动态设置元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。

• 如何将视觉稿中的px转换成

  rem

  比如视觉稿是以750px进行设计的：

  flexible将视觉稿分成了

  100

  份，每份被称为

  a

  ，同时

  1rem

  被认为是是

  10a

  ，我们可以计算出：

  1a = 7.5px;
  1rem = 75px; // 根标签对应的font-size值就是75px；

媒体查询

• 概念

  根据不同的屏幕编写不同的代码。

• 缺点
  无法实现100%兼容，区间内无法进行区分。额外的代码工作量等。

• 例子

  @media screen and (min-width: 375px){
  html {
  font-size: 14.0625px;
  }
  }
  @media screen and (min-width: 360px){
  html {
  font-size: 13.5px;
  }
  }
  @media screen and (min-width: 320px){
  html {
  font-size: 12px;
  }
  }
  html {
  font-size: 16px;
  }

小结：文本px、图片百分比、宽高间距等rem，再加flex布局。还可以参考成熟的flexible.js（https://www.jianshu.com/p/04efb4a1d2f8）

一个简单易用的库 FastClick

它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。

介绍：https://www.awesomes.cn/repo/ftlabs/fastclick

安装使用：https://www.npmjs.com/package/fastclick

<script src="//path/fastclick/1.0.6/fastclick.js"></script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

了解移动单位

了解像素

• 概念

  css像素(Pixel): 代码中使用到的逻辑像素，实际并不存在的。

• 设备独立像素(Device Independent Pixel): 可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。

• 设备像素(Device Pixel): 设备能控制显示的最小单位，也就是物理像素，我们通常说的1920×1080像素分辨率就是用的设备像素单位

• dpr(device pixel ratio): 设备像素比，即：dpr = dp/dpi

  查看dpr大小：window.devicePixelRatio

• ppi(pixel per inch): 每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像。

  120-160之间的手机被归为低密度手机
  160-240被归为中密度
  240-320被归为高密度
  320以上被归为超高密度（例如苹果公司的Retina显示屏）

  

移动端页面开发时我们通常配置元信息`<meta name="viewport" content="width=device-width" />`，
其含义就是将视口设置为 css像素 = 设备像素，即我们在页面中设置的1个CSS像素大小就等价于1个设备像素大小。