CSS3 @media 媒体查询

当我还是一个萌新的时候，我会写了一些东西之后，我就在想，怎么让它适应移动端？（或者说样式不同）

学习了媒体查询之后，没想到就这么简单。

媒体查询语法：

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

在单独的CSS文件或style标签里加上@media，把相应的CSS写在大括号里。

• @media开头
• mediatype 媒体类型
• 关键字 and（与） not（非） only（仅）
• media feature 媒体特性，用小括号套住

媒体类型

种类	描述
all	所有设备（默认值）
screen	屏幕设备（最常用值）
pint	打印设备

PC端优先常用

@media only screen and (min-width: 768px) {
    CSS-Code;
}