[分享]css中媒体查询代码

媒体查询是CSS3的一个很重要的特性。它可以让CSS根据设备的特性进行不同的布局。在响应式设计中，媒体查询是非常实用的。下面我们来了解一下关于CSS中媒体查询的代码。首先，我们需要在CSS中写入媒体查...

媒体查询是CSS3的一个很重要的特性。它可以让CSS根据设备的特性进行不同的布局。在响应式设计中，媒体查询是非常实用的。下面我们来了解一下关于CSS中媒体查询的代码。
首先，我们需要在CSS中写入媒体查询的代码。它的语法如下：

@media mediatype and (expression) {
   CSS代码 } 

其中，mediatype指的是设备的类型，例如screen、print等；expression则是设备的特性，例如设备的像素宽度等。
下面，让我们来看一下一个实际的例子：

/* 当设备的宽度小于等于768像素时使用这些样式 */
@media screen and (max-width: 768px) {
   body {
      background-color: yellow;
   }
}

/* 当设备的宽度大于768像素时使用这些样式 */
@media screen and (min-width: 769px) {
   body {
      background-color: blue;
   }
} 

这段代码中，我们使用了两个媒体查询，分别对应不同的设备宽度。当设备的宽度小于等于768像素时，应用了黄色的背景颜色；当设备的宽度大于768像素时，应用了蓝色的背景颜色。
除了设备的宽度，我们也可以使用其他的特性来进行媒体查询。例如，我们可以根据设备的类型来进行样式的设置，例如用于屏幕或打印。

/* 根据设备类型，设置不同的背景颜色 */
@media screen {
   body {
      background-color: yellow;
   }
}
@media print {
   body {
      background-color: white;
   }
} 

以上就是关于CSS中媒体查询的代码介绍。使用媒体查询可以让我们的网站在不同设备上有更好的展示效果。如果你还没有尝试使用媒体查询，不妨尝试一下吧！