PC和手机的区别就是各种各样的屏幕，响应式布局来适应屏幕

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-600px)

(max-device-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-360px) and (max-500px) {}
 
 <link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min- 800px)">
 <link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min- 600px) and (max- 800px)">
 <link rel="stylesheet" type="text/css" href="indexC.css" media="screen and (max- 600px)">

移动设备

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