详解css media用法是什么

PHPz原创: 2023-04-21 17:05:1720浏览

在网站开发中，CSS的重要性不言而喻。我们可以通过CSS来为网站设定样式、布局、字体等各种外观属性，使网站呈现出更具吸引力和易读性的外观。但是，不同的设备（如桌面电脑、平板电脑、手机等）拥有不同的屏幕尺寸和分辨率，如果没有针对不同设备的CSS样式设置，网站显示效果可能会相当不理想。

解决这个问题的方法之一是CSS Media Query（CSS媒体查询）功能，该功能能够针对不同的设备编写不同的CSS样式。本文将深入介绍CSS Media Query的基本概念、语法和应用案例，让你上手这项实用的技术。

什么是CSS Media Query

CSS Media Query是一种在样式表中嵌入的条件语句，用于指定不同屏幕尺寸和设备类型应用不同的CSS样式。通过CSS Media Query，我们可以实现响应式网站设计（Responsive Web Design），使网站在不同设备上都能够提供最佳的用户体验。

CSS Media Query部分是由媒体类型和媒体特性组成的，格式如下：

@media mediatype and|not|only (media feature) {
   CSS rules;
}

其中mediatype指定要应用CSS样式的媒体类型，如screen、print、handheld等，而 media feature指定要应用CSS样式的媒体特性，如设备宽度、设备高度、方向等。

媒体类型

媒体类型是指用于呈现文档的设备类型。常见的媒体类型包括：

all：适用于所有设备。
print: 适用于打印机和打印预览等输出设备。
screen：适用于电脑屏幕、平板电脑、智能手机等屏幕设备。
handheld：适用于小屏幕的手持设备（如智能手机）。
speech：适用于屏幕阅读器等声音设备。

媒体特性

媒体特性包括但不限于以下几种：

width：视口宽度，单位px。
height：视口高度，单位px。
device-width：设备宽度。
device-height：设备高度。
orientation：设备方向，landscape（横向）或portrait（竖向）。
aspect-ratio：视口宽度与高度的比例。
color：设备颜色位深。
resolution:设备分辨率，单位dpi。

通过上述两种组合，我们可以针对不同设备类型和屏幕属性，定义不同的CSS样式。

CSS Media Query的使用示例

下面是一些具体的CSS Media Query使用示例，涉及到针对不同设备和屏幕特性的定制样式。

1.针对不同设备类型设置不同样式

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

上面两段CSS代码分别针对电脑屏幕和智能手机屏幕，应用不同的背景颜色。

2.针对设备方向设置不同样式

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

上面两段CSS代码针对设备方向（横向或竖向），设置不同的背景颜色。

3.针对视口宽度设置不同样式

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

上面两段CSS代码基于视口宽度，应用不同的字体大小。

4.结合多种条件

当然在实际使用中，根据具体情况需要结合多种条件。例如，我们要设置一个适用于智能手机的logo图片，但是只有当设备的视口宽度小于等于800px时才生效。这时候可以使用如下的代码：

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

在这段CSS代码中，我们使用了handheld and (max-device-width: 800px)和(-webkit-min-device-pixel-ratio: 1.5)两个条件。前者指定设备为手持设备，并且设备视口宽度小于800px。后者兼容了WebKit渲染引擎，指定设备像素比大于1.5。