css媒体查询怎么设置

CSS媒体查询是响应式网页设计中重要的一环，它可以使网页在不同屏幕尺寸上呈现不同的样式，以适应不同设备的需求。

媒体查询可以根据设备的宽度、高度、分辨率、横竖屏等条件，选择不同的样式代码。

@media only screen and (max-width: 768px) {
   /* 在宽度小于等于768px时，应用以下样式 */
   body {
      font-size: 16px;
   }
   .header {
      display: none;
   }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
   /* 在宽度大于769px且小于等于1024px时，应用以下样式 */
   body {
      font-size: 18px;
   }
   .header {
      display: block;
   }
   .menu {
      width: 50%;
   }
}

@media only screen and (min-width: 1025px) {
   /* 在宽度大于1025px时，应用以下样式 */
   body {
      font-size: 20px;
   }
   .header {
      background-color: blue;
   }
   .menu {
      width: 30%;
   }
}

在上面的代码中，我们使用了三个@media查询，分别对应不同的设备宽度范围，然后在每个媒体查询块中定义了相应的样式代码。

需要特别注意的是，@media查询前面必须添加"only screen"，代表只在屏幕上应用样式，而不在打印页面或其他媒介上应用。

在使用媒体查询的时候，我们还必须学会如何选用合适的断点。断点是指从一个设备尺寸到另一个设备尺寸之间的阈值，我们需要在这些阈值上选择合适的尺寸值来做媒体查询。

最后，需要注意的是，在开发响应式网页时，不仅需要进行媒体查询的设置，还需要优化网页的布局、字体、图片等元素，以使网页在各种设备上呈现良好的用户体验。