手机设备基本概念

physical pixel 物理像素值

image.png

device-independent pixel 设备独立像素

image.png

device pixel ratio 设备像素比

当前浏览器宽度*设备像素比 = 屏幕像素值

document.devicePixelRatio

浏览器并不是根据物理硬件的像素来工作的，而是根据 dips 宽度来工作。dips 是将像素值与实际距离联系起来的，不管屏幕的像素密度是多少，dips 为 1px，那么实际宽度就是 1px，也就是对应 CSS 中的 1px，而不是对应物理像素 1px。

PPI (pixels per inch) 每英寸的像素值

PPI = 根号(物理像素宽 * 物理像素宽 + 物理像素高 * 物理像素高) / 英寸

由苹果提出当PPI大于300时,那么这个屏幕就是一个高清屏,也就是retina屏幕,即视网膜显示屏

浏览器宽高:

document.documentElement.clientWdith
document.documentElement.clientHeight

Viewport

什么是Viewport

移动设备上的viewport是指设备的屏幕上能用来显示网页的区域,一般来讲,移动设备上的viewport都要大于浏览器的可视区域

Viewport如何使用

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

Viewport属性

width: 设置layout viewport的宽度,值为正整数,或字符串device-width
initial-scale: 设置页面的初试缩放值,为一个数字,可以带小数
minimum-scale: 设置页面的最小缩放值,为一个数字,可以带小数
maximum-scale: 设置页面的最大缩放值,为一个数字,可以带小数
user-scalable: 是否允许用户进行缩放,值为no或yes

CSS度量单位

px rem em vh vw vmax vmin
px 像素值
rem 继承了html的font-size
em 继承父级的font-size
vw 浏览器可视区域的1%
vh 浏览器可视区域的1%

响应式布局 (Media Queries)

针对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature) {
   CSS-Code;
}

mediatype(略)

media feature 媒体取值范围

max-width
min-width

移动端

移动端