HTML+CSS编写静态网站-37 媒体查询初探

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

现在我们对响应式设计有了一个基本的了解，那么现在，我们将使用media query也就是媒体查询，来根据页面的宽度调整页面的布局。

这里我们新建一个专门用于响应式网页设计的CSS，所以，文件=》新建，保存。我会把文件命名为response.css。

现在，我们将这个css文件包含在我们的HTML中。所以我们来到index.html，我们想把它放在main.css之后。所以我们来复制这一行。跳过一行并粘贴它，然后，把main.css，改为response.css：

 
 
              <link rel="stylesheet" href="css/main.css">

<link rel="stylesheet" href="css/responsive.css">
现在，我们把这个更改应用到其他2个HTML文件中，所以我们来保存一下。来到about.html。在main.css之后，我们来粘贴respond.css。保存about.html，转到contact.html并粘贴保存。

我们要在main.css之后添加这个文件的原因是因为我们将在移动样式基础之上创建平板电脑和桌面样式。

所以，我们进入respond.css文件。我们来写一些媒体查询。这里使用特殊的CSS语法：

所以，我要输入一个@，然后输入一个单词，media，然后是一个空格，然后是单词，screen，空格，以及关键字and，在括号内，我要输入，媒体特性min-width。并将其设置为480像素。然后我要添加两个花括号：

 
 
@media screen and (min-width:480px){

       

}
到目前为止，这会告诉浏览器，screen是媒体类型的一种，我们基于这种媒体类型进行判断。接下来，and关键字之后，我们的最小宽度为480个像素。所以，只有2个判断都是真的，才会执行花括号中的内容。

所以说。如果媒体类型不是屏幕，比如说听觉设备或打印机，或者如果最小宽度小于480像素，就不会添加这些样式。也就是说。任何比480px更大的屏幕都将应用大括号里的这些样式。

在这些花括号内，我们可以按照通常的方式编写CSS，只有当我们的媒体查询是真实的，括号中的CSS代码才会被应用。

所以让我们做一个测试，给一个非常明显的变化。我们会说body，背景设置为navy。

 
 
@media screen and (min-width:480px){

       body{

              backgound:navy;

       }

}
现在，如果我们保存，切换到我们的网站，并刷新页面。我们调整浏览器的大小，我们你看。屏幕宽度大于480px，背景颜色就会变化。

接下来，我们再添加一个媒体查询，所以，我们将键入@，media，screen，并在括号中输入最小宽度660像素。然后我们将打开我们的大括号，再次通过改变整个背景颜色来做区分。我们会说background:darkgreen：

 
 
@media screen and (min-width:660px){

       body{

              background:darkgreen;

       }

}
所以我们来保存一下。切换到我们的浏览器并刷新页面。

我们可以调整浏览器宽度，当超过660像素时，我们看到它正在从海军蓝变为深绿色。然而，如果它低于660像素，但它高于480，背景颜色更改为海军蓝。这些样式只是用于测试，在下一个视频中，我们将删除它们，并添加更多的样式。

在这里，您会注意到我们的媒体查询按特定顺序排列。这是CSS的层叠性质在起作用。在最小的尺寸下，它会main.css的样式。然后，在我们的第一个媒体查询中，我们覆盖main.css中设置的背景颜色。在我们的第二次媒体查询中，我们再次覆盖第一次媒体查询设置的背景颜色。通过利用层叠的特性，我们可以编写与之前大小不同的CSS，而不是重写所有内容。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/media-query/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/media-query/