css媒体查询 @media

最新推荐文章于 2025-02-10 17:54:24 发布

原创最新推荐文章于 2025-02-10 17:54:24 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种针对不同屏幕尺寸进行响应式布局调整的方法。通过使用CSS媒体查询，根据不同设备的最大宽度设置#main元素的最小高度及#ewm元素的位置。适用于前端开发中优化网页在多种设备上的显示效果。

 @media screen and (max-width: 412px) {
        #main{
            min-height: 665px !important;
        }
        #ewm{
            top: 85px;
        }
    }


    @media screen and (max-width: 360px) {
        #main{
            min-height: 570px !important;
        }
        #ewm{
            top: 70px;
        }
    }


    @media screen and (max-width: 321px) {
        #main{
            min-height: 510px !important;
        }
        #ewm{
            top: 70px;
        }
    }