移动端html尺寸,移动端页面的三种尺寸

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

逻辑像素尺寸

相对尺寸

1 物理像素尺寸

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

标题一直按照如图所示铺满三行「相对尺寸」

标题下方的分割线上下 margin、主要内容四周的 padding 尺寸依据 device-width 变化 「逻辑像素尺寸」

分割线以设备所能达到的最细效果展示 「1 物理像素尺寸」

图片宽度占 100%，高度等比缩放 「相对尺寸」

正文内容，展示最适合设备的尺寸 「逻辑像素尺寸」

一、逻辑像素尺寸

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

复制代码

所以 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