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

 

    移动设备

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