PC有四大內核，手機端只有webkit內核，
240*320
320*480（主要）
360
480*800
480*854
640*960
800*1280
1080*1920
1280*720（主要1200）
媒體類型
all 所有媒體
braille 盲文觸覺設備
print 手持設備
projection 打印預覽
screen 彩屏設備
speech 聽覺類似媒體設備
tty 不適用像素設備
tv電視
關鍵字
and not only
not 關鍵字是用來排除某種制定的媒體類型
only 迎來定制特定媒體類型
媒體特性
(max-width:600px)
(max-device-width:480px) 設備輸出寬度
(orientation:landscape) 橫屏
(orientation:portrait) 豎屏
(-webkit-min-decice-pixel-retio:2) 像素比
devicePixelRatio 設備像素比
window.devicePixelRatio = 物理像素/dips
樣式引用
<link rel="stylesheet" href="css/index.css" media="print" /> @import url("css/demo.css") screen; 這個不推薦使用 @media screen{ 寫樣式的 } <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”> @media screen and (min-width:360px) and (max-width:500px) {} <link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min-width: 800px)"> <link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> <link rel="stylesheet" type="text/css" href="indexC.css" media="screen and (max-width: 600px)">
移動設備
<meta name='viewport' content=''/> 規定他
width[pixel_value|device-width(設備寬度)]
height[pixel_value|device-height(設備高度)]
user-scalable = yes||no 是否允許手動縮放,才能用下面3個
initial-scale 初始比例
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi=[dpi_value|device=dpi|high-dpi|medium-dpi|low-dpi]
dpi_value (70-400) 每英寸顯示的像素點的個數
device=dpi 設備默認的像素密度
high-dpi|medium-dpi|low-dpi 像素密度 高-中-低
完整的設備媒體 安卓系統沒有具體數值 ios支持
<meta name='viewport' content='width=320px/device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,target-densitydpi=device-dpi'/> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">