@media screen 和 tag：响应式网页结构 css 编写方法实现自适应页面布局

响应式网页结构设计越来越流行，包括进入 CSS3 Media Queries 的基础知识。

媒体查询的作用是利用表达式来判断设备的分辨率，并输出对应的风格。也就是说，我们可以通过在页面的html结构下编写不同的样式来改变页面的样式布局，以适应当前不同的设备，比如电脑、手机、平板等。

那么媒体查询如何工作或如何使用它们？

其实很简单。有两种方式：

一种是直接导入link中的css文件来设置设备尺寸，然后引用不同的css文件：

上面这段话的意思是如果最小屏幕宽度至少为400px（即大于等于400px）要改变styleA.css-文件生效。

在链接标签的媒体属性中：

screen 是媒体类型之一。 CSS2.1定义了10种媒体类型。您可以参考相关文件。

它被称为关键字。其他关键字包括not（排除某些设备），only（限制某些设备）

（min-width: 400px）是一对括号括起来的媒体函数，这里不仅有min-width，我们看下面。

以上这一段的意思是，如果屏幕宽度大于600像素且小于800像素，则styleB.css文件生效。

还有一种选择是直接写在标签中：

1. @meediaekraan and (max-width: 600px) { /*如果屏幕尺寸小于600px，应用以下CSS样式*/
2. .class {
3. background: #ccc;
4. }
5. }

以上 css 代码可以写在 style 标签中，也可以插入到 css 文件中。写法是加在@media前缀前，与链接的媒体属性相同。

需要注意的是，由于网站是根据屏幕宽度调整布局的，所以尽量避免绝对宽度布局。这一点非常重要，否则如果页面溢出，可能会显示不完整。

Enhancement：关键字，例如 not only all media 查询

not：不用于排除某些特定设备，例如@media will not print（非打印设备）

only：用于指定特定媒体类型。对于支持媒体查询的移动设备，移动网络浏览器将忽略单个关键字（如果存在）并根据以下表达式直接应用样式文件。对于不支持媒体查询但能够读取媒体类型网页浏览器的设备，在查找单个关键字时将忽略此样式文件。所有设备：所有设备，应该经常看到

听力设备

盲文

点触设备

手持

便携式设备，例如手机、平板电脑

打印

打印预览图， ETC。移动终端和其他设备

tty

打字机或终端等设备

tv

电视和其他类型的设备响应式结构。您可以创建一个 html 文件，然后通过最小化浏览器屏幕来查看页面布局更改。