CSS3 媒介查询

Posted 2022-12-05 Dragon_GL

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 媒介查询相关的知识，希望对你有一定的参考价值。

一、响应式设计

响应式设计，设计可根据所显示的设备屏幕大小（视口宽度）而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。

例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。

有了媒体查询，我们就可以对所有可能的不同设备编写精准css代码，这样，UI设计就能根据设备的视口宽度自动的更样式，提供不同屏幕大小下的最佳 UI 体验。

二、媒介查询

2-1. 什么是媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2-2. 为什么响应式设计需要，媒体查询

通过媒介查询就能针对不同的设备特性（视口的宽度）设置特定的CSS样式规则。

2-3. 如何在CSS文件中引入媒体查询

媒介查询写在CSS样式代码的最后，CSS中文名称即层叠样式表，即在同一特性下，靠后的的样式规则会覆盖掉前面的样式规则。

设置Meta标签

首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width: 宽度等于当前设备的宽度

initial-scale=1：初始的缩放比例（默认为1）

maximum-scale=1：允许用户缩放到得最大比例（默认为1）

user-scalable=no：用户不能手动缩放

加载兼容JS文件

因为IE8既不支持HTML5也不支持CSS3 Media，所以需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

设置IE渲染方式默认为最高(可选择添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

太给力了。

更好的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

写CSS3媒体查询

例:

@media screen and (max-width:720px) and (min-width:320px)
    body
       background-color: #CCCCCC;
    

@media screen and (max-width:320px)
      body
         background-color: #FFFFFF;

上面代码的意思是，当屏幕宽度在320px~720px之间时，媒体查询中body的背景色（background-color: #CCCCCC;）, 这个背景色的设置优先级高于之前的。当屏幕宽度在小于320px时，媒体查询中body的body背景色（background-color: #FFFFFF;）会重叠之前的body背景色.