媒体查询：手机端自适应页面

最新推荐文章于 2024-08-01 04:52:55 发布

Sink_x0

最新推荐文章于 2024-08-01 04:52:55 发布

阅读量593

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_41622983/article/details/111192852

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

博客内容讲述了如何解决登录页面在手机浏览器上显示不正常的问题。通过添加媒体查询和调整样式，实现了响应式布局，确保在320px到750px屏幕宽度之间的设备上，登录表单能正确显示。主要优化包括使用百分比布局，避免了父元素透明度影响子元素，并使用rgba来控制透明效果。

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

登录页是后来改版加上的，没有用自适应的UI框架。所以用手机浏览器打开是这样，根本没办法登录：
在这里插入图片描述
然后修改调整了一下：

用媒体查询修改样式

@media screen and (min-width: 320px)and (max-width: 750px){
            h1{
                color: #fff;
            }
            .bgimg {
                min-width: 320px;
                min-height: 0px;
            }
            .center {
                width: 100%;
                height: 100vh;
                position: absolute;
                left: 0%;
                top: 0%;
            }
            .center_img {
                display: none;
            }
            .center .loginFrom {
                width: 90%;
                height: 70%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                border-radius: 15px;
                background: rgba(255, 255, 255, 0.5)
            }
        }