移动端适配

Posted on Edited on

title: 移动端适配
date: 2019-10-09 21:30:02
tags:  # 这里写的分类会自动汇集到 categories 页面上，分类可以多级

  • css # 一级分类
  • 移动端 # 二级分类

媒体查询 media-query

当媒体查询为 true 时，相关的样式表或样式规则会按照正常的级联规被应用。 当媒体查询返回 false， 标签上带有媒体查询的样式表仍将被下载 （只不过不会被应用）。

包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

1
2
3
4
5
6
7
8
<style>
@media (min-width: 700px) and (orientation: landscape){
  // 大于700px执行display：none
    .sidebar {
        display: none;
        }
    }
</style>

视口 iewport

为什么要设置 viewport
viewport 的设置不会对 PC 页面产生影响，但对于移动页面却很重要。下面我们举例来说明：

  1. 媒体查询 @media 响应式布局中，会根据媒体查询功能来适配多端布局，必须对 viewport 进行设置，否则根据查询到的尺寸无法正确匹配视觉宽度而导致布局混乱。如不设置 viewport 参数，多说移动端媒体查询的结果将是 980px 这个节点布局的参数，而非我们通常设置的 768px 范围内的这个布局参数
  2. 由于目前多数手机的 dpr 都不再是 1，为了产出高保真页面，我们一般会给出 750px 的设计稿，那么就需要通过设置 viewport 的参数来进行整体换算，而不是在每次设置尺寸时进行长度的换算。

viewport 详解

在移动端有三种类型的 viewport: layoutviewport、visualviewport、idealviewport。具体解释如下：

layoutviewport:   大于实际屏幕， 元素的宽度继承于 layoutviewport，用于保证网站的外观特性与桌面浏览器一样。layoutviewport 到底多宽，每个浏览器不同。iPhone 的 safari 为 980px，通过 document.documentElement.clientWidth 获取。
visualviewport: 当前显示在屏幕上的页面，即浏览器可视区域的宽度。
idealviewport: 为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。比如 iphone 7 为 375px, iphone 7p 为 414px。

viewport 设置

<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'/>
通过对 meta 标签三个 viewport 的设置，最终使页面完美展示。

  1. width 设置的是 layoutviewport 的宽度
  2. initial-scale 设置页面的初始缩放值，并且这个初始缩放值是相对于 idealviewport 缩放的，最终得到的结果不仅会决定 visualviewport，还会影响到 layoutviewport
  3. user-scalable 是否允许用户进行缩放的设置

只要 layoutviewport === visualviewport，页面下面不会出现滚动条，默认只是把页面放大或缩小。

设备像素比 dpr 与 1px 物理像素

物理像素（physical pixel）

手机屏幕上显示的最小单元，该最小单元具有颜色及亮度的属性可供设置，iphone6、7、8 为：750 _ 1334，iphone6+、7+、8+ 为 1242 _ 2208

设备独立像素（density-indenpendent pixel）

此为逻辑像素，计算机设备中的一个点，css 中设置的像素指的就是该像素。老早在没有 retina 屏之前，设备独立像素与物理像素是相等的。

设备像素比（device pixel ratio）

设备像素比(dpr) = 物理像素/设备独立像素。如 iphone 6、7、8 的 dpr 为 2，那么一个设备独立像素便为 4 个物理像素，因此在 css 上设置的 1px 在其屏幕上占据的是 2 个物理像素，0.5px 对应的才是其所能展示的最小单位。这就是 1px 在 retina 屏上变粗的原因，目前有很多办法来解决这一问题。

1px 的物理像素的解决方案

从第一部分的讨论可知 viewport 的 initial-scale 具有缩放页面的效果。对于 dpr=2 的屏幕，1px 压缩一半便可与 1px 的设备像素比匹配，这就可以通过将缩放比 initial-scale 设置为 0.5=1/2 而实现。以此类推 dpr=3 的屏幕可以将 initial-scale 设置为 0.33=1/3 来实现。

设备像素比 dpr 与 rem 的适配方案

rem 是相对于根元素 html 的 font-size 来做计算。通常在页面初始化时加载时通过对 document.documentElement.style.fontSize 设置来实现。

rem 适配规则

通过对 initial-scale = 1/dpr 的设置，已将对屏幕的描述从物理像素转化到了物理像素上了，这将是后续推导的基础，且设计稿为 750px。

物理像素为 750 = 375 _ 2，若屏幕等分为 10 份，那么 1rem = 75px，10rem = 750px;
物理像素为 1125 = 375 _ 3，若屏幕等分为 10 份，那么 1rem = 112.5px, 10rem = 1125px;
物理像素为 1242 = 414 * 3, 若屏幕等分为 10 份，那么 1rem = 124.2px, 10rem = 1242px;

同时为了书写方便可以直接通过 px 布局，然后在打包时利用 pxtorem 库转化为基于 rem 的布局。

视口单位(vw,vh)适配方案

将视口宽度 window.innerWidth 和视口高度 window.innerHeight 等分为 100 份，且将这里的视口理解成 idealviewport 更为贴切，并不会随着 viewport 的不同设置而改变。

vw : 1vw 为视口宽度的 1%
vh : 1vh 为视口高度的 1%
vmin :  vw 和 vh 中的较小值
vmax : 选取 vw 和 vh 中的较大值

如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。这里的比例关系也推荐不要自己换算，使用 pxtoviewport 的库就可以帮我们转换。当然每种方案都会有其弊端，这里就不展开讨论。