“响应式Web设计”——媒体查询

响应式 Web端视觉

“响应式Web设计”——媒体查询

2020-10-29 10:08发布生成海报

站内文章 / Web前端

719 0

简介

上文中我们简单介绍说“响应式Web设计”的是一位国外的大佬利用弹性网格布局、弹性图片/媒体、媒体查询三种已有技术来提供的一个解决方案。那就说明这三种技术应该就是响应式设计的核心技术了，事实证明确实是这样子的。

接下来的文章中我们将分别介绍这三种技术，本文首先介绍第一种技术——媒体查询。媒体查询（3级）是CSS3中的一个模块，在CSS3中，其实是有很多模块的。那为什么刚才说媒体查询的时候要在括号中加个“3级”呢，这是因为3级它代表的是媒体查询的版本，目前媒体查询的版本是3级，4级的话目前只是一个草案阶段，里面的很多特性浏览器暂时是不怎么支持的，本文后面也会简单介绍下媒体查询（4级）中提出的一些新特性，希望你时刻关注新特性及浏览器的支持情况。

说了这么多，关于什么是媒体查询只字未提，这有点不合情理，下面就介绍下什么是媒体查询吧。媒体查询我们可以将它理解成一个选择器，通过媒体查询，我们可以指定在不同的设备条件下为我们的页面元素添加不同的样式，好了，上面是我的理解，我们接下来看看官方的定义吧：CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的样式。

媒体查询的用法

1、在css样式文件中直接写媒体查询代码（推荐用法）

媒体查询的写法有很多种，在css文件中直接编写媒体查询代码是我比较推荐的一种写法。我们可以在css文件中通过@media语句来指定设备条件和要加载的样式代码。如下，我们将下面的css代码直接复制粘贴到任何一份css文件中，然后将此css文件加载到你的HTML页面，通过改变浏览器的宽度，我们可以看到背景颜色会相应的改变：

body {
  background-color: grey;
}
@media screen and (min-width: 320px) {
  body {
    background-color: green;
  }
}
@media screen and (min-width: 550px) {
  body {
    background-color: yellow;
  }
}
@media screen and (min-width: 768px) {
  body {
    background-color: orange;
  }
}
@media screen and (min-width: 960px) {
  body {
    background-color: red;
  }
}

预览结果：

2、<link>标签中使用媒体查询

第二中用法就是在link标签中使用媒体查询，通过media属性设置不同的设备条件，来加载不同的样式文件，如下面的写法：

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" ，href="800wide-portrait-screen3.css" />

上面三种都是通过<link>标签运用媒体查询的写法，其中第一种的含义是设备如果有屏幕而且设备是垂直朝向的，那就加载“portrait-screen.css”这个样式表；第二种含义是如果设备有屏幕，并且垂直朝向，而且视口宽度大于800像素，那就加载“800wide-portrait-screen.css”这个样式文件；第三种写法跟前面两种略微不同，中间有个逗号，那它的含义是如果逗号前后其中一个条件满足，那就加载“800wide-portrait-screen3.css”这个文件。这三种都是通过标签来使用媒体查询，进而加载不同的样式文件。

3、@import

除了<link>标签引入css文件外，我们还可以通过@import来引入相应的css文件，这样一来，我们的媒体查询也可以和@import结合使用了，下面来看看具体的写法：

@import url("phone.css") screen and (max-width:360px);

不过css中的@import会增加HTTP请求，影响加载速度，所以大家要慎用哈。

上面三种呢，是媒体查询的三中具体用法，在此推荐大家使用第一种，而且第一种用法中多数情况下是不需要指定screen的，我们可以看看官方规定的说明：在针对所有设备的媒体查询中，可以使用简写语法，即省略关键字all（以及紧随其后的 and ）。换句话说，如果不指定关键字，则关键字就是 all。所以呢，除非你真的想针对特定的媒体类型应用样式，否则就不要写screen and了。

媒体查询中可以测试的属性

媒体查询中最常用的就是width属性，不过在此处列一下所有的属性，供大家参考了解：

属性	描述	备注
width	视口宽度	常用
height	视口高度
device-width	设备屏幕的宽度	4级中已废除
device-height	设备屏幕的高度	4级中已废除
orientation	设备方向是水平还是垂直
aspect-ratio	视口的宽高比
color	颜色组分的位深
color-index	设备颜色查找表中的条目数
monochrome	单色帧缓冲中表示每个像素的位数
resolution	屏幕或打印分辨率
scan	针对电视的逐行扫描和隔行扫描
grid	设备基于栅格还是位图

媒体查询使用的注意事项

媒体查询使用的时候方法很多，但是这里要介绍一些注意事项，便于大家能更加合理的使用媒体查询。

有很多人喜欢针对不同的媒体查询条件编写不同的样式文件，然后将其全部挂载到HTML页面中，当浏览器加载解析页面时，针对相应条件解析相应的样式文件。但是在这个过程中所有的css文件都会被下载，只是在页面解析的时候针对不同的设备条件去解析不同的css文件而已，这就导致页面加载的时候会有很多的HTTP请求，去下载HTML页面挂载的所有css文件。所以呢，个人建议还是直接将媒体查询写到既有的常规css文件中，在你需要媒体查询的时候，就在常规的css文件中写媒体查询的代码就可以了，这就避免了多次请求带来的页面阻塞问题。

<meta>标签介绍

关于视口的<meta>标签是网页和移动浏览器的接口，它会告知移动浏览器怎样渲染此页面，此标签放置在<head>标签内。下面简单看一下如何使用：

<meta name="viewport" content="initial-scale=2.0,width=device-width" />

上面代码就是<meta>标签的用法。首先， name="viewport" 表示针对视口，这不用说了。接content="initial-scale=2.0" 的意思是“把内容放大为实际大小的两倍”（0.5就是一半，3.0就是三倍）。最后， width=device-width 告诉浏览器页面的宽度等于设备的宽度（ width=device-width ）。

至此呢，关于媒体查询的介绍以及如何使用就介绍到这了，相信大家有一个大概的了解了，下面简单介绍下媒体查询（4级）新添加的特性吧。

媒体查询（4级）特性

目前媒体查询（4级）仅仅是草案阶段，在此呢也就简单提一下4级所具有的新特性：可编程、指针与悬停、亮度。因为目前浏览器支持度较低，而且又仅是草案阶段，我也懒得介绍了，大家感兴趣的话可以发挥网络资源了解，不过我想大家可能会对“亮度”这个特性感兴趣，它可以根据设备的环境亮度来适配不同的样式哦，哈哈，是不是很神奇，好了，就写到这了，感兴趣的大家自己查找资源哈，介绍了也没用，毕竟很多浏览器又不支持。

总结

本文主要介绍了媒体查询，但是在响应式设计中仅有媒体查询只能实现可适配的Web设计，即从一种布局到另一种布局的切换。为了实现最终的响应式，还必须利用流式布局，以便设计可以在不同断点之间或媒体查询处理范围外弹性适应。创建弹性布局让媒体查询断点间的过渡更平滑。这些内容在后续文章中介绍吧。

作者：X北辰北

链接：https://xuqwblog.blog.csdn.net/article/details/89376947

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。