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">