Question

我对显示器屏幕和手机之间的宽度有疑问。但是，它在PC上运行良好但不能在手机上工作，因为右侧有空白区域。以下代码如下。

HTML

<div id="home-about">
    <div class="middle-align">
        <h1> ABOUT ME </h1> 
        <p> TESTING TESTING TESTING TESTING TESTING </p>
    </div> 
</div>

CSS

#home-about {
    margin:0 auto;
    clear:both;
    height:880px;
    padding:150px 50px 50px 50px;
    background-color:#d24d57;
    text-align:left;
    line-height:25px;
}

.middle-align {
    width:1200px;
    margin:0 auto;
}

首先，#home-about的颜色为#d24d57。颜色完全显示在显示器屏幕上，但不显示在手机上。

这是JSFIDDLE。如您所见，JSFIDDLE，尝试向右滚动，没有颜色，只有白色。如何填写#d23d57。有什么想法吗？

Answer 1

将width: 1200px移至#home-about：

#home-about {
    margin:0 auto;
    clear:both;
    padding:150px 50px 50px 50px;
    background-color:#d24d57;
    text-align:left;
    line-height:25px;
    width: 1200px;
}

jsFiddle Demo

Answer 2

请参阅此链接以了解响应式设计 Responsive layout tutorial? 或者您可以使用Bootstrap进行响应式HTML开发Get-Bootstrap。希望这个帮助

这些建议应该是评论，但不能做到这一点，因为没有得到这些特权

在电话右侧的空白区域

2 个答案: