PC端 CSS3中的媒体查询，常见的规则 ，代码

常见的PC端CSS3媒体查询规则如下：

1. 根据屏幕宽度设置样式：

/* 当屏幕宽度小于等于768像素时，应用以下样式 */
@media screen and (max-width: 768px) {
    /* CSS规则 */
}

2. 根据屏幕方向设置样式：

/* 当屏幕为横向时，应用以下样式 */
@media screen and (orientation: landscape) {
    /* CSS规则 */
}

3. 根据分辨率设置样式：

/* 当屏幕分辨率大于等于192dpi时，应用以下样式 */
@media screen and (min-resolution: 192dpi) {
    /* CSS规则 */
}

4. 根据设备类型设置样式：

/* 当设备为打印机时，应用以下样式 */
@media print {
    /* CSS规则 */
}

5. 根据设备像素比设置样式：

/* 当设备像素比大于等于2时，应用以下样式 */
@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) {
    /* CSS规则 */
}

以上是几种常见的PC端CSS3媒体查询规则，可以根据具体需求进行灵活应用。

相关问题

CSS媒体查询（CSS Media Queries）

CSS媒体查询（CSS Media Queries）是CSS3中提出的一个新概念，它允许为页面设置不同的媒体条件，并根据条件来应用相应的样式。\[1\]通过使用媒体查询，我们可以根据不同的设备或浏览器特性来调整页面的布局和样式，从而实现响应式设计。\[2\]媒体查询可以通过两种方式来使用：一种是使用 @media 规则，在CSS代码中选择载入不同的样式；另一种是使用 <link> 标签的 media 属性，选择加载不同的样式表文件。\[2\]此外，还有一些工具如respond.js可以帮助我们实现在不支持媒体查询的浏览器中使用媒体查询的特性。respond.js会遍历页面上的所有CSS引用，并使用媒体查询分析CSS规则，然后根据浏览器宽度的变化来添加或删除与媒体查询匹配的样式，从而使不支持媒体查询的浏览器也能够支持min-width和max-width等特性。\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [CSS3 媒体查询（Media Queries）](https://blog.csdn.net/ixygj197875/article/details/79365768)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

vue3项目pc端屏幕适配

对于Vue 3项目的PC端屏幕适配，你可以使用CSS的媒体查询来实现响应式布局。以下是一种常见的做法：

1. 使用Viewport单位：在HTML文档的头部添加以下代码，以确保页面按照设备的宽度进行显示。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 使用CSS媒体查询：在CSS文件中使用媒体查询来根据不同的屏幕宽度设置样式。例如，你可以在@media查询中定义不同的样式规则来适应不同的屏幕尺寸。

/* 默认样式 */
.container {
  width: 100%;
}

/* 在小屏幕下修改样式 */
@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}

/* 在大屏幕下修改样式 */
@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

这是一个简单的示例，你可以根据实际需求和设计要求进行调整。通过使用媒体查询和Viewport单位，你可以实现PC端屏幕适配，使页面在不同设备上能够呈现出最佳显示效果。