css媒体查询 @media

最新推荐文章于 2022-09-02 10:53:14 发布

luogan129

最新推荐文章于 2022-09-02 10:53:14 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/luogan129/article/details/76975294

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 @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;
        }
    }