css @media 响应式布局

1、在 html 标签中

<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 600px) and (max-width: 800px)">

2、在样式表中

@media screen and (min-width: 600px) and (max-width: 800px) { /*当屏幕尺寸大于600，小于800px时，应用下面的CSS样式*/
.class {
    ......
}}

以上 and 为关键字，另外其他关键字还包括 not(排除某种设备)，only(限定某种设备)等。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）

only: 用来定某种特别的媒体类型

all : 所有设备，这个应该经常看到

aural : 听觉设备

braille : 点字触觉设备

handled : 便携设备，如手机、平板电脑

print : 打印预览图等

projection : 投影设备

screen : 显示器、笔记本、移动端等设备

tty : 如打字机或终端等设备

tv : 电视机等设备类型

embossed : 盲文打印机