TPower DesignAppearance
移动端适配
名词解释
- 视口 就是浏览器显示页面内容的屏幕区域，分为布局视口、视觉视口和理想视口。（比如移动端布局想要的是理想视口，就是手机屏幕有多宽，我们的布局视口就有多宽）
- 物理像素 指的是设备的实际像素，这个主要由设备自身的硬件所决定，因此同一类型的设备物理像素是固定的。（比如：iphone6的物理像素宽度为 1334 x 750 px）
- 逻辑像素 是相对于物理像素之后提出的一个概念，也被称为设备独立像素（Device Independent Pixel），我们在css中设置的1px就等于一个设备独立像素。（逻辑像素为 667 x 375 px）
- 设备像素比（Device Pixel Ratio，DPR） DPR = 物理像素 / 逻辑像素（例如DPR = 2,也就相当于一个逻辑像素实际上由四个物理像素组成），厂商在设备出厂时就已经设置了DPR值，并且禁止用户进行更改。
问题
众所周知，手机端设备视口、逻辑像素、分辨率这些变量的不同，在每个设备展示都不一样，需要一种方案来统一。
- 首先、不论转换是否方便，我就是不想在开发代码的时候换算这些单位，更不想去操心什么转换系数（根节点单位）
- 我会考虑某些属性不需要转换为REM、VW等，如果统一转换，这会不符合我的项目需求。
- 我不想在我的代码中一些地方使用px，另一些地方又使用em、rem、vw等这些视口单位，我就想一把梭全部使用px单位。
确定方案
名词解释
- px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- rem 相对单位（root em，根em），是相对HTML根元素。
- vw 视口单位，1vw 等于视口宽度的1%。
- rm 根元素（html节点）字体大小的倍数。
采用PostCSS插件postcss-px-to-viewport的适配方案，它能完美解决上面的三个痛点，高效的将代码中px单位转为rm、rem、vw等视口单位，一份配置文件完美解决适配问题。
确定设计稿尺寸
这里选择物理像素宽度为750px的iphone6作为移动端设计稿尺寸。
原因
iphone6 是中型手机的一个代表，从中间尺寸向上和向下适配的时候界面调整的幅度最小。
方案配置
给postcss-px-to-viewport配置字段：
| 字段名 | 值 | 解释 |
|---|---|---|
| unitToConvert | 'px' | 需要转换的单位，默认为"px" |
| viewportWidth | 1920 | 设计稿的视口宽度 |
| unitPrecision | 5 | 单位转换后保留的精度 |
| propList | ['*'] | 能转化为vw的属性列表 |
| viewportUnit | 'vw' | 希望使用的视口单位 |
| fontViewportUnit | 'vw' | 字体使用的视口单位 |
| selectorBlackList | [] | 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 |
| minPixelValue | 1 | 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 |
| mediaQuery | false | 媒体查询里的单位是否需要转换单位 |
| replace | true | 是否直接更换属性值，而不添加备用属性 |
| exclude | undefined | 忽略某些文件夹下的文件或特定文件，例如node_modules下的文件 |
| include | undefined | 如果设置了include，那将只有匹配到的文件才会被转换 |
| landscape | false | 是否添加根据 landscapeWidth 生成的媒体查询条件@media (orientation: landscape) |
| landscapeUnit | 'vw' | 横屏时使用的单位 |
| landscapeWidth | 1920 | 横屏时使用的视口宽度 |
配置生效后，原有的代码中px在编译阶段被自动实时转换成vw视口单位，DOM元素与视口大小等比例缩放。
适配iphone屏幕的安全区域与边界
名词解释
- 安全区域 针对iphone手机提出的概念，指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
- contain: 可视窗口完全包含网页内容
- cover：网页内容完全覆盖可视窗口
- auto：默认值，跟 contain 表现一致
iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
- safe-area-inset-left：安全区域距离左边边界距离
- safe-area-inset-right：安全区域距离右边边界距离
- safe-area-inset-top：安全区域距离顶部边界距离
- safe-area-inset-bottom：安全区域距离底部边界距离
css
// 需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 根据情况设置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */