pc端可以用媒体查询吗

PC端可以使用媒体查询，通过媒体查询可根据设备显示器特性设定CSS样式。

在PC端，可以使用媒体查询来实现响应式设计或根据不同的屏幕尺寸、分辨率等应用不同的样式规则，以下是关于在PC端使用媒体查询的详细内容：

一、媒体查询的基本概念

媒体查询（Media Query）是CSS3中的一种强大工具，它允许开发者根据不同的设备特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则，通过媒体查询，可以创建响应式设计，确保网站在不同设备上（包括PC端）都能提供良好的用户体验。

二、媒体查询的语法结构

媒体查询的基本语法如下：

@media [ mediatype and|not only ] mediafeature {
  CSSCode;
}

mediatype可选项指定了媒体类型，如screen、print等；mediafeature则用于指定媒体特性，如屏幕宽度（width）、高度（height）等，要为屏幕宽度大于等于1024像素的设备设置样式，可以这样写：

@media screen and (minwidth: 1024px) {
  body {
    backgroundcolor: lightblue;
  }
}

三、在PC端常用的媒体查询场景

1、调整页面布局：根据PC端屏幕的宽度，调整网页的布局结构，当屏幕较窄时，可以将多栏布局改为单栏布局，以提高可读性。

2、优化图片显示：对于不同分辨率的PC屏幕，可以加载不同分辨率的图片，以减少带宽占用并提高页面加载速度。

   @media (minresolution: 192dpi) {
     body {
       backgroundimage: url('highresimage.jpg');
     }
   }

3、改变字体大小和行距：为了适应不同屏幕尺寸和分辨率，可以根据需要调整字体大小和行距，以确保文本内容的清晰易读。

四、示例代码与解释

以下是一个使用媒体查询调整页面布局和样式的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>媒体查询示例</title>
  <style>
    body {
      fontfamily: Arial, sansserif;
    }
    /* 默认样式 */
    .container {
      width: 80%;
      margin: auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    /* 当屏幕宽度小于600px时，调整容器宽度和内边距 */
    @media (maxwidth: 599px) {
      .container {
        width: 100%;
        padding: 10px;
      }
    }
    /* 当屏幕宽度在600px到1023px之间时，改变背景颜色 */
    @media (minwidth: 600px) and (maxwidth: 1023px) {
      .container {
        backgroundcolor: #f0f0f0;
      }
    }
    /* 当屏幕宽度大于等于1024px时，增加边框宽度 */
    @media (minwidth: 1024px) {
      .container {
        borderwidth: 2px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>媒体查询示例</h1>
    <p>这是一个使用媒体查询调整样式的示例页面。</p>
  </div>
</body>
</html>

在这个示例中，我们定义了一个.container类来包裹页面内容，并通过媒体查询根据不同的屏幕宽度应用了不同的样式规则，当屏幕宽度小于600px时，容器将占据整个屏幕宽度，并且内边距减小；当屏幕宽度在600px到1023px之间时，容器的背景颜色会改变；当屏幕宽度大于等于1024px时，容器的边框宽度会增加。