科普前端尺寸系列，推荐按顺序阅读

1. px 与像素是如何换算的
2. 探究移动端 viewpoint 本质
3. 移动端页面的三种尺寸

对于移动端页面来说，所有尺寸都应该明确的归为三类：

• 逻辑像素尺寸
• 相对尺寸
• 1 物理像素尺寸

以示范页面为例，在不同尺寸下希望效果如下

• 标题一直按照如图所示铺满三行「相对尺寸」
• 标题下方的分割线上下 margin、主要内容四周的 padding 尺寸依据 device-width 变化 「逻辑像素尺寸」
• 分割线以设备所能达到的最细效果展示 「1 物理像素尺寸」
• 图片宽度占 100%，高度等比缩放 「相对尺寸」
• 正文内容，展示最适合设备的尺寸 「逻辑像素尺寸」

一、逻辑像素尺寸

只要页面设置了如下 viewport（三种尺寸都以此为前提），那么 px 所以对应的逻辑像素就是最适合当前设备的

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

所以 maring、paddinig 以及正文 font-size，参照设计稿使用 px 即可。可以保证无论适配任何尺寸屏幕，各自的大小都将是最恰当的。

.main {
	padding: 20px;
	box-sizing: border-box;
	font-size: 16px;
}

.gap_line {
	margin: 20px 0;
}

二、相对尺寸

希望标题在无论 375 还是 800 宽度的屏幕下，都能恰好的以三层高度铺满屏幕。让文字的宽度固定为屏幕百分百即可，例如当前设计稿标准为 375px，标题 size 为 28px。那么对应的 vw = 28 / 375 * 100 = 7.4

h1 {
  font-size: 7.4vw;
}

对于图片，即时周围的 padding 为逻辑像素尺寸，本身只需要铺满整行即可

.main img {
  width: 100%;
}

三、1 物理像素尺寸

设备所能达到的最细效果展示，本质就是当前设备的 1 物理像素。设备像素比(dpr) = 物理像素/逻辑像素 所以物理像素=逻辑像素/设备像素比(dpr)。 设备像素比可以调用 js 中的 devicePixelRatio 属性。不过测试发现，安卓上某些浏览器不支持显示 1 物理像素，所以不考虑 dpr 为小数的情况，直接向上取整。

        .height-px1 {
            height: 1px;
        }
        @media (-webkit-min-device-pixel-ratio: 2) {
            .height-px1 {
                height: 0.5px;
            }
        }
        @media (-webkit-min-device-pixel-ratio: 3) {
            .height-px1 {
                height: 0.34px;
            }
        }
				@media (-webkit-min-device-pixel-ratio: 4) {
            .height-px1 {
                height: 0.25px;
            }
        }

给 line 增加 height-px1 即可（width、border 使用同样方法设置，不一一列出）

小米 8   iPhone 6s

iPad mini