移动端适配知识总结&专有名词解释

  • 2017-12-18
  • 0
  • 0

写过移动端适配或是做过响应式开发的小伙伴对下面这段代码一定不会陌生:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我们知道,加了上面这段代码之后,在移动设备上的页面宽度就会和设备宽度一致了,但你知道原理是什么吗?我之前在公司例会和部门例会上做过分享,其中就介绍过这个原理,但说实话当中涉及的一些专有名词和知识,如果不温习的话一时间还真的很难区分;下面我将从自己的理解和之前的培训内容出发,结合网上看到各位大神的理解,梳理一下移动端适配的一些知识。

几个专有名词和单位

首先,先来看一下物理像素

以 iphone6 为例,可知道:

分辨率:1334pt x 750pt
指的是屏幕上垂直有 1136 个物理像素,水平有 750 个物理像素。

我们常说的分辨率指的就是物理分辨率。

屏幕尺寸:4.7in
注意英寸是长度单位,不是面积单位。4.7 英寸指的是屏幕对角线的长度,1 英寸等于 2.54cm。

屏幕像素密度:326ppi
指的是每英寸屏幕所拥有的像素数,在显示器中,dpi=ppi。dpi 强调的是每英寸多少点。同时,屏幕像素密度 = 分辨率/屏幕尺寸

接着,我们来看一下其他的单位。

设备独立像素:设备独立像素,不同于设备像素(物理像素),它是虚拟化的。比如说 css 像素,我们常说的 10px 其实指的就是它。需要注意的是,物理像素开发者是无法获取的,它是自然存在的一种东西,该是多少就是多少。

设备像素比:缩写简称 dpr,也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素(垂直方向或水平方向)。可以通过 JS 来获取:window.devicePixelRatio

逻辑像素:在不拉伸和压缩屏幕的情况下,逻辑像素在数值上等于 css 像素,也等于设备独立像素。

PC 和移动端不同的视口

注:以下涉及的像素均为 CSS 像素。并且默认不考虑缩放。

布局视口

写过 css 的小伙伴应该知道,我们在 html、body 设置 width:100%; height:100%; 的时候,它在 PC 上是正常的,能继承浏览器可视化窗口的宽高;但在移动设备上却不是这样。我们都知道 100% 这种百分数应该是继承父元素而来的。那在这里是继承哪里的呢?

  • PC 浏览器:有一个用来约束 CSS 布局视口的东西,又叫做初始包含块。这也就是所有宽高继承的由来。除去 margin、padding,布局视口和浏览器可视窗口宽度是一致的,同时也和浏览器本身的宽度一致。
  • 移动设备浏览器:有视口概念,和 PC 上完全不一样。

示例:在 PC 上和在没加上述 meta 标签的 iphone6 上用下面代码做一个二八布局:

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
}

.left {
    float: left;
    width: 20%;
    height: 100%;
    background: red;
}

.right {
    float: right;
    width: 80%;
    height: 100%;
    background: green;
}
----
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

结果是:pc 上表现正常;但在 iphone6 上会发现 html 的宽度是 980px,而浏览器的宽度是 375px,这个 980px 就是我们上面提到的视口了。

移动端布局视口:

评论

还没有任何评论,你来说两句吧