游戏官方网站：pc页面与移动端布局做到响应式的因素

1、为什么页面中只设置了两中媒体查询就可以做到全部设备css兼容？
@media screen and (min-width:981px) {}
@media screen and (max-width:980px) {}

桌面端(PC)端响应式原因：

1. 响应式设计的基础 页面通过设置两个断点（981px 和 980px）将屏幕分为两部分：桌面端和移动端。     
        桌面端样式适用于宽度大于等于 981px 的设备，而移动端样式适用于宽度小于等于 980px 的设备。这种方式覆盖了大部分常见设备的屏幕尺寸范围。

2、使用相对单位：在代码中大量使用了相对单位（如 %, rem, em 等），而不是固定单位（如 px）；相对单位能够根据父元素或视口大小自动调整，从而适应不同设备的屏幕比例。

例如：  .wh(@width, @height); // 动态计算宽高

3、流式布局：不同断点下设置了不同的容器宽度，确保内容在各种屏幕尺寸下都能正确显示

.container {
    width: 1920px; /* 桌面端 */
}


.container {
    width: 720px; /* 移动端 */
}

4. 媒体查询的灵活性
媒体查询的范围涵盖了主流设备的分辨率：
min-width:981px：适用于桌面端、笔记本电脑、平板横屏等大屏幕设备。
max-width:980