手機(jī)設(shè)備基本概念
physical pixel 物理像素值
device-independent pixel 設(shè)備獨(dú)立像素
device pixel ratio 設(shè)備像素比
當(dāng)前瀏覽器寬度*設(shè)備像素比 = 屏幕像素值
document.devicePixelRatio
瀏覽器并不是根據(jù)物理硬件的像素來(lái)工作的，而是根據(jù) dips 寬度來(lái)工作。dips 是將像素值與實(shí)際距離聯(lián)系起來(lái)的，不管屏幕的像素密度是多少，dips 為 1px，那么實(shí)際寬度就是 1px，也就是對(duì)應(yīng) CSS 中的 1px，而不是對(duì)應(yīng)物理像素 1px。
PPI (pixels per inch) 每英寸的像素值
PPI = 根號(hào)(物理像素寬 * 物理像素寬 + 物理像素高 * 物理像素高) / 英寸
由蘋(píng)果提出當(dāng)PPI大于300時(shí),那么這個(gè)屏幕就是一個(gè)高清屏,也就是retina屏幕,即視網(wǎng)膜顯示屏
瀏覽器寬高:
document.documentElement.clientWdith
document.documentElement.clientHeight
Viewport
什么是Viewport
移動(dòng)設(shè)備上的viewport是指設(shè)備的屏幕上能用來(lái)顯示網(wǎng)頁(yè)的區(qū)域,一般來(lái)講,移動(dòng)設(shè)備上的viewport都要大于瀏覽器的可視區(qū)域
Viewport如何使用
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
Viewport屬性
width: 設(shè)置layout viewport的寬度,值為正整數(shù),或字符串device-width
initial-scale: 設(shè)置頁(yè)面的初試縮放值,為一個(gè)數(shù)字,可以帶小數(shù)
minimum-scale: 設(shè)置頁(yè)面的最小縮放值,為一個(gè)數(shù)字,可以帶小數(shù)
maximum-scale: 設(shè)置頁(yè)面的最大縮放值,為一個(gè)數(shù)字,可以帶小數(shù)
user-scalable: 是否允許用戶進(jìn)行縮放,值為no或yes
CSS度量單位
px rem em vh vw vmax vmin
px 像素值
rem 繼承了html的font-size
em 繼承父級(jí)的font-size
vw 瀏覽器可視區(qū)域的1%
vh 瀏覽器可視區(qū)域的1%
響應(yīng)式布局 (Media Queries)
針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype(略)
media feature 媒體取值范圍
max-width
min-width
