响应式网站设计基础

<meta name="viewport" content="width=device-width,initial-scale=1">

all 所有媒体设备；默认值
print 打印机
handheld 小的手持设备
projection 幻灯片
screen 电脑显示器
tv 电视类型的设别
tty 电传打字机等

//默认media="all" 所有的设备；默认阻塞渲染
<link href="../css/index.css" rel="stylesheet"> 
// 媒体类型为print,只在用于打印机时，使用该样式阻塞渲染；其他情况不阻塞
<link href="../css/1.css" rel="stylesheet" media="print"> 

@media print {
    p.test { font-family:verdana,sans-serif;font-size:14px;}
}
@media screen {
    p.test {font-family:times,serif;font-size:10px;}
}
@media print,screen {
    p.test {font-weight: bold}
}

// 0-640px
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
// >640px
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
// 高度>宽度
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
// 宽度>高度
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

// 500px-600px
@media (min-width: 400px) and (max-width: 600px) {
    .desc:after {
        content:" In fact, it‘s between 500px and 600px wide.";
      }
}