Question

我的网页上有一个带有白色背景颜色的标题。它在PC显示器中正常工作。但在手机中，结果是这样的：

http://uupload.ir/files/j0ki_screen_shot_2015-10-10_at_19.44.32.png

当我向左滚动页面时，我的标题的一半不存在。

http://uupload.ir/files/o0j3_screen_shot_2015-10-10_at_19.50.36.png

我的代码在这里：

<style type="text/css">
    .my-header-box{
width:100%;
background-color:#fff;
border-bottom:1px solid #4ba028;
    }

    .my-header-wrapper{
        width:100%;min-width:940px;max-width:1280px;
        height:200px;
        /*border:1px solid #ff0000;*/
        margin:0 auto;
    }

    .my-logo img{
max-width:300px;
max-height:90px;
    }
</style>

<div class="my-header-box">
    <div class="my-header-wrapper">

    </div>
</div>

Answer 1

您为min-width修正了宽度 - .my-header-wrapper，这就是您在较小设备上看到它的原因。

.my-header-wrapper{
    width:100%;
    max-width:1280px;
    height:200px;
    margin:0 auto;
}

否则，请对具有939像素或更少像素设备的设备使用媒体查询。

@media only screen and (max-device-width: 936px){
    .my-header-wrapper{
        min-width: 100%;
    }
}

Answer 2

在你的css中Base(const Base &other);是它发生的主要原因。

如果您想在移动设备上查看网站时提高响应速度，请尝试使用css媒体查询

请在此处查看简单教程 W3Schools tutorial

如果你真的想要深刻理解，那么这将是主要的帮助： CSS-tricks - Media Queries

CSS技巧对于学习CSS周围的任何东西都非常有帮助

标题在低分辨率显示器

2 个答案: