媒体查询 les plus utilisees - CSS

媒体查询是CSS3的一个重要特性，它可以根据不同的设备或屏幕尺寸来应用不同的样式规则，使得网站能够适应不同的设备，提供更好的用户体验。

以下是媒体查询中最常用的几种：

1. @media screen and (min-width: 768px)

该媒体查询适用于屏幕宽度大于等于768像素的设备，通常用于响应式设计中设置移动端和桌面端的样式。

@media screen and (min-width: 768px) {
    /* 样式规则 */
}

2. @media screen and (max-width: 767px)

该媒体查询适用于屏幕宽度小于等于767像素的设备，通常用于响应式设计中设置移动端的样式。

@media screen and (max-width: 767px) {
    /* 样式规则 */
}

3. @media screen and (min-width: 992px)

该媒体查询适用于屏幕宽度大于等于992像素的设备，通常用于响应式设计中设置中等屏幕（如平板电脑）的样式。

@media screen and (min-width: 992px) {
    /* 样式规则 */
}

4. @media screen and (min-width: 1200px)

该媒体查询适用于屏幕宽度大于等于1200像素的设备，通常用于响应式设计中设置桌面端的样式。

@media screen and (min-width: 1200px) {
    /* 样式规则 */
}

5. @media screen and (orientation: landscape)

该媒体查询适用于设备横屏的情况下，通常用于设置横屏时的样式。

@media screen and (orientation: landscape) {
    /* 样式规则 */
}

以上是媒体查询中常用的几种。通过合理使用媒体查询，可以为网站提供更好的用户体验，同时也可以提高网站的兼容性和可访问性。