Question

我使用“ @media screen”来调整网页大小，并且效果很好。将其设置为如果页面达到特定宽度，它将缩小内容以适合页面。但是，我的“ hr”和“ main p”会发生这种奇怪的故障 hr和p都以大约800px的宽度延伸超出其容器，我不希望这种情况发生。这是链接（https://jsfiddle.net/3oezsrj6/1/），这是我的代码。要了解我在说什么，请拖动页面的宽度使其变小，然后观看内容的调整大小，但是在特定的位置，右边的内容将溢出容器。

main{
    width: 960px;
    min-width: 320px;
    background-color: white;
    margin: auto;
    border-style: solid;
    border-width: 0 3px;
}
footer{
    width: 960px;
    margin: auto;
    border: 3px solid black;
    background-color: #333;
}
hr{
    border: 0;
    border-top: 3px solid black;
    width: 700px;
    margin: auto;
}
main p{
    font-size: 15pt;
    width: 700px;
    text-align: justify;
    text-indent: 50px;
    margin: auto;
}
@media screen and (max-width: 959px){
    main{
        width: 95%;
    }
    footer{
        width: 95%;
    }
}
@media screen and (max-width: 699px){
    hr{
        width: 90%;
    }
    main p{
        width: 90%;
    }
}

<main>
    <h1>Welcome</h1>
    <hr>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
    </p>
</main>
<footer>
    <p>Yeet</p>
</footer>

Answer 1

您的容器实际上是700px宽，两侧是15px margin， 2x 3px宽边框。这样可以使宽度更接近736px，并且您的媒体查询需要反映该大小，而不是容器的宽度。

@media screen and (max-width: 737px){ }

Answer 2

这是因为您为p和hr设置了固定宽度。这是更新的小提琴：https://jsfiddle.net/3oezsrj6/5/

我所做的更改是：

hr{
    border: 0;
    border-top: 3px solid black;
    width: 90%;
    margin: auto;
}
main p{
    font-size: 15pt;
    width: 90%;
    text-align: justify;
    text-indent: 50px;
    margin: auto;
}

您可以根据需要更改宽度（以百分比为单位），而不是以像素为单位，这样可以固定宽度，因此无法响应。

Answer 3

在CSS之下更新，您就可以完成...

hr{
    max-width: 700px;
    width: 100%;
}
main p{
    width: 100%;
    max-width: 700px;
}

*{
  margin: 0;
  padding; 0;
  text-align: center;
}
body{
  background-color: gray;
}
main{
    width: 960px;
    min-width: 320px;
    background-color: white;
    margin: auto;
    border-style: solid;
    border-width: 0 3px;
}
footer{
    width: 960px;
    margin: auto;
    border: 3px solid black;
    background-color: #333;
}
hr{
    border: 0;
    border-top: 3px solid black;
    max-width: 700px;
    width: 100%;
    margin: auto;
}
main p{
    font-size: 15pt;
    width: 100%;
    max-width: 700px;
    text-align: justify;
    text-indent: 50px;
    margin: auto;
}
@media screen and (max-width: 959px){
    main{
        width: 95%;
    }
    footer{
        width: 95%;
    }
}
@media screen and (max-width: 699px){
    hr{
        width: 90%;
    }
    main p{
        width: 90%;
    }
}

<main>
    <h1>Welcome</h1>
    <hr>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
    </p>
</main>
<footer>
    <p>Yeet</p>
</footer>

响应式网页具有最大宽度的怪异故障

3 个答案: