移动端适配概念

在千峰逆战班学习的第二十七天
一步一个脚印，越努力越轻松，越坚强越幸运！
继续加油，奥利给！

关于适配

移动设备屏幕尺寸不一样，不同型号的手机会有不同大小的屏幕，不同型号的平板也是，就算是我们的PC端也是会有不同大小的屏幕；适配用来做布局的，移动端比较麻烦-设备太多，尺寸也不一样；而且设计师设计的尺寸 和我们切图的尺寸也不一样。
注：H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面，在不同尺寸的手机设备上，页面达到合理的展示或者保持统一效果的等比缩放看起来差不太多。

手机分辨率，查看以下网址：

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
https://material.io/resources/devices/

适配元素：

1. 字体
2. 宽高
3. 间距
4. 图像

适配方法：

1、百分比适配

根据父级算百分比，需配合其它布局使用

1. 根据父级的宽度绝对自己的宽度，宽度好算，高度没法算；
2. 所以建议：高度不变，宽度变化的时候 用 百分比；
3. 百分比布局案例：360 等

2、viewport

在移动端 viewport 视口就是浏览器显示页面内容的屏幕区域。在 viewport 中有两种视口，分别表示为， visual viewport（可视视口）和 layout viewport（布局视口），viewport缩放适配 把所有机型的css像素设置成一致。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度 initial-scale： 初始的缩放比例（默认设置为 1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为 1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为 1.0） user-scalable：用户是否可以手动缩放（默认设置为 no，因为我们不希望用户放大缩小页面）

设置meta标签的目的：

让 visual viewport（可视视口）和 layout viewport（布局视口）大小相等

    设备窗口（iPhone 6 ...）      显示内容的窗口（HTML 的宽）

UI -> 设计网页 -> 会不会根据不同设备设计不同网页？ 移动端 pc iPad 一套移动端网页 -> 适配不同大小的移动端设备 -> 前端人员 （咱们） 移动端页面 以 iPhone 6 为标准 -> 网页 -> 适配

1px = 4 ppi :
1px -> css 像素 （逻辑）
4 ppi -> 设备像素（物理像素）
iPhone 4 css 像素 320 * 480
设备像素 640 * 960

dpr : 设备像素比
设备像素 640 * 960 / css 像素 320 * 480
1 个 css 像素 （px） = 4 个设备像素 (ppi)
宽是 2 倍的关系 — 1 个 css 像素 的宽 = 2 个设备像素 的宽
高是 2 倍的关系 — 1 个 css 像素 的高 = 2 个设备像素 的高
dpr = 2;(很重要)

UI 根据 设备像素 640 * 960
css 像素 320 * 480
怎么让设备像素 640 * 960 内容 显示在 css 像素 320 * 480 的范围内？ 设备像素/dpr(2)

font-size： 默认情况下是 16px = 1em = 1rem
rem : 单位 始终是相对根标签 HTML 的 font-size 来显示大小的；
em : em 的大小是根据自身或者最近的父元素的 font-size：的值来显示的；

默认情况下： 1rem = 16px
html = font-size:100px; 1rem = html font-size:100px; 为了好计算； 注：HTML 的 font-size 要大于 12px；

如何让 HTML 的 font-size 不是固定的值？

vw 和 vh 是视口（viewport units）单位:
vw: 视口宽度 不管屏幕的分辨率是多大 ，都是固定的 100vw = 当前设备的宽
vh: 视口高度 不管屏幕的分辨率是多大 ，都是固定的 100vh = 当前设备的高
以 iPhone 6 为案例： 375 * 667 ； (标准)
375px = 100% = 100vw
1vw = 1% = 3.75px
HTML： font-size：100px = 26.66667vw
以 iPhone 4 为案例： 320 * 480 ；
320px = 100% = 100vw 1vw = 1% = 3.2px
HTML： font-size：100px = 31.2vw