1

我一直在设计一个响应式网站，我遇到了这个问题。

首先，从纵向模式更改为横向模式并没有触发任何响应反应。它只是放大了网站。我确保这不会发生在：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

但是，当用户切换回纵向模式时，右侧会出现一个空白。这是一个屏幕截图。

在此处输入图像描述

这是容器的部分代码。

    <div class="about">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="headlines"><h1>Hello..</h1></div>
                    <div class="row">
                        <div class="span6">
                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>

                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>
                        </div>
                        <div class="span6">

                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>

                        </div>
                    </div>
                     <hr class="soften"/>

                            <div class="about-hire">
                                <h3 >Hello?</h3><a href="#" class="btn-about">Let's talk!</a>
                            </div>
                </div>
            </div>
        </div>
    </div>

这是相应的CSS。

.about {
     text-align: center;
     padding: 100px 0 100px 0;
     background-color: #fff;

}

.about .container {

    position: relative;
    z-index: 9;
}


 @media (max-width: 767px) {


  .about {
    margin-left: -20px;
    margin-right: -20px;

  }

   .about .container {
    margin-left: 20px;
    margin-right: 20px;

  }



 }

任何帮助是极大的赞赏。

4

1 回答 1

0

我可以在这里想到两件事：

1. 规模应该是这样的：

<meta name="viewport" content="width=device-width, initial-scale=1">

2. 可能是您的尺寸状态...如果您没有它，请将其添加到您的身体标签上...在您的主css中：

body {min-width: 100%;}

如果你想具体一点，你可以从这个开始： body {min-width: 1024px;}

然后根据需要适当地添加您的媒体代码。例子：

@media only screen and ( max-width: 640px) {blah}

:)

于 2013-01-08T15:46:42.653 回答