初识CSS3之媒体查询（2015年05月31日）

2021-10-31 01:45:16

一、什么是媒体查询

媒体查询是面向不同设备提供不同样式的一种实现方式，它可以为每种类型的用户提供最佳的体验，也是响应式设计的实现方式。

现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。

二、媒体查询规则

1、引入方式

<style>

@media (max-width: 600px) {

.facet_sidebar {

display: none;

}

</style>

2、相关规则

媒体查询包含了一个媒体类型和如CSS3规范中描述的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且媒体查询中的所有表达式为真。

@media (min-width:800px) { ... }

媒体类型：media；

媒体属性（表达式）：min-width:800px;表示最小宽度为800px，如果浏览器的最小宽度为800px，则使用{ ... }中的样式

@media (min-width:800px) and (max-width:1200px) { ... }则表示：在最小宽度为800px，最大宽度为1200px时应用{...}中的样式

三、媒体查询语法

1、逻辑操作符

操作符 not、and、or、 only 可以用来构建复杂的媒体查询。

and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

表示媒体查询仅在最小宽度为800px，最大宽度为1200px，并且方向是纵向的时候才应用{...}中的样式

or操作符用来把多个媒体属性组合起来，只要有其中一个媒体属性为真，则整个查询结果都为真

@media (min-width:800px) or (orientation:portrait) { ... }

表示媒体查询在最小宽度为800px或者方向为纵向的时候使用{...}中的样式

not 操作符用来对一条媒体查询的结果进行取反。

not位于媒体查询的开始处，not 会忽略结果。换句话说，如果该查询本来在没有 not 关键词的情况下为 true，那么现在它将为 false

@media (not min-width:800px) { ... }

表示在最小宽度不是800px的时候，会使用{...}中的样式

only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

@media (min-width:800px), (orientation:portrait) { ... }

表示媒体查询在最小宽度为800px或者方向为纵向的时候使用{...}中的样式

2、媒体属性

3、媒体类型

在JetBrains WebStorm 10.0.2中输入@media便会有以下的提示信息，查了下资料才知道这是媒体类型

四、一个超简单的Demo

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
       页面可见宽度大于800px时，页面背景为蓝色
        */
@media screen and (min-width: 800px) {
body{
background-color: blue;
            }
        }
/*
        页面可见宽度小吴800px时，页面背景为红色
        */
@media screen and (max-width: 800px) {
body{
background-color: red;
           }
       }
</style>
</head>
<body>

</body>
</html>

效果：

缩小浏览器窗口后

五、使用感受

优点：使用媒体查询能为不同的设备制定不同的样式，使得页面效果在各个设备上的视觉效果良好，提高了用户体验度。

缺点：需要为不同的设备编写不同的css样式，增大了开发的复杂度。

建议使用：Bootstrap、Amaze UI等优秀开源前端框架

码农公寓

相关文章