js media query

基础概念： Media Query 是 CSS3 的一个重要特性，它允许开发者根据设备的特定条件（如视口宽度、设备像素比、方向等）来应用不同的 CSS 样式。在 JavaScript 中，可以通过监听 window 对象的 resize 事件以及使用 matchMedia 方法来响应媒体查询的变化。

优势：

响应式设计：Media Query 使得网页能够根据不同设备的屏幕尺寸和特性来调整布局，提供更好的用户体验。
灵活性：开发者可以为不同的设备和条件定义不同的样式，从而实现更精细的控制。
性能优化：通过只在需要时加载和应用特定的样式，可以减少不必要的资源消耗。

类型：

视口宽度：根据设备的视口宽度应用不同的样式。
设备像素比：根据设备的像素密度（如 Retina 屏幕）应用不同的样式。
方向：根据设备的方向（横向或纵向）应用不同的样式。
分辨率：根据设备的分辨率应用不同的样式。

应用场景：

响应式网页设计：确保网站在不同设备上都能良好显示。
移动优先设计：先为移动设备设计样式，然后通过媒体查询为桌面设备添加或调整样式。
打印样式：为打印输出定义特定的样式，去除不必要的元素和调整布局。

常见问题及解决方法：

问题：媒体查询没有按预期工作。原因：

选择器错误：媒体查询的选择器可能不正确，导致样式没有被应用。
顺序问题：媒体查询的顺序可能影响结果，特别是当多个查询条件重叠时。
浏览器兼容性：某些旧版本的浏览器可能不完全支持 CSS3 媒体查询。

解决方法：

检查选择器：确保媒体查询的选择器正确无误。
调整顺序：根据需要调整媒体查询的顺序，确保更具体的查询条件放在前面。
使用前缀：对于需要兼容旧版本浏览器的情况，可以使用 CSS 前缀（如 -webkit-、-moz-）。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Example</title>
    <style>
        body {
            background-color: lightblue;
        }

        @media (min-width: 768px) {
            body {
                background-color: lightgreen;
            }
        }

        @media (min-width: 1024px) {
            body {
                background-color: lightcoral;
            }
        }
    </style>
</head>
<body>
    <h1>Resize the browser window to see the effect of media queries</h1>
</body>
</html>

在这个示例中，当浏览器窗口的宽度小于 768px 时，背景颜色为浅蓝色；当宽度在 768px 到 1023px 之间时，背景颜色为浅绿色；当宽度大于或等于 1024px 时，背景颜色为浅珊瑚色。

通过这种方式，开发者可以确保网页在不同设备上都能提供良好的用户体验。