【发布时间】：2017-11-03 05:04:02
【问题描述】：
我的网站是响应式的，那么为什么会有水平滚动条？我对此感到困惑！水平滚动条消失需要什么？此外，标头在移动设备上不会缩小到 320px 标记，即使在代码编辑器中测试时会缩小....???
这里是我的 CodePen 的链接：https://codepen.io/IDCoder/pen/Xevyqq
这是我的 HTML 代码：
<html>
<title></title>
<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<div class="Main">
<div class="Header Box">
<div id="One">
<img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" width="1000" height="166"/>
</div>
</div>
<div class = "Second Row">
<div class="About Us">
<h1>Technology you can trust</h1>
<p>Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BBB (Better Business Bureau) with an A+ rating.</p>
<p>Ethersonic specializes in Computer diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair</p>
</div>
<div class="BBB VOSB">
<img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" width="200" height="124"/>
</div>
</div>
<div class="Third Row">
<div id="Computers">
<img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"/>
<p>
Desktop and Laptop Repair
</p>
</div>
<div id="Security">
<img src="https://s1.postimg.org/8j0ejlsp7j/Security_Cameras.jpg
" width="300" height="201"/>
<p>
Security Camera Systems | <br>
Access Controls Systems |
Intercom Systems
</p>
</div>
<div id="Networking">
<img src="https://s1.postimg.org/7ymhfqjm3z/Networking_2.jpg" width="300" height="220"/>
<p>
Network Installation |
Low Voltage Cabling
</p>
</div>
</div>
<div class="Fourth Row">
<div class="container">
<div id="slider">
<figure>
<img src="https://s1.postimg.org/7uayt1hjf3/378c87079dddbfe1d78c9f892695626fl-m0xd-w1020_h770_q80.jpg"/>
<img src="https://s1.postimg.org/11px6krrfz/extralarge.jpg"/>
<img src="https://s1.postimg.org/6yehdl959r/gen_Mid.09186160_1.jpg"/>
<img src="https://s1.postimg.org/8tr267l5fz/ISaly9e2xn0r8r1000000000.jpg"/>
<img src="https://s1.postimg.org/11px6krz5r/ISinl3p5sts48e1000000000_1.jpg"/>
</figure>
</div>
</div>
<div>
<div class ="Slideshow Description">
<p>
We are Installation Experts! <br>
Offering Customized Installation for Both Residentials and Commercial Properties
</p>
</div>
</div>
</div>
<div class="Footer">
<div>
© Ethersonic Technologies LLC. All rights reserved.
</div
</div>
</body>
</html>
这是我的 CSS 代码：
.Main{
display: grid;
grid-template-columns: 1/1r;
/*background-color: green;*/
margin: 5px 125px 0 75px;
grid-gap: 25px;
}
.Header.Box {
display: grid;
grid-template-columns: 100%;
/*background-color: red;*/
grid-gap: 15px;
}
.About.Us{
font-size: 15px
}
.BBB.VOSB{
text-align: right;
padding-right: 10px;
}
#One, #Two, #Three {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.Second.Row{
display: grid;
grid-template-columns: 100%;
grid-gap: 15px;
}
.Third.Row{
display: grid;
grid-template-columns: 100%;
grid-gap: 15px;
/*background-color: green;*/
}
#Computers, #Security, #Networking{
/*border-style: solid;*/
border-color: black;
border-width: 1px;
border-radius: 15px;
padding: 5px;
text-align: center;
}
.Fourth.Row{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 25px;
/*background-color: blue;*/
}
.container{
max-width: 500px;
/*background-color: blue;*/
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
.Slideshow.Description{
font-size: 1.25em;
}
.Footer{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 25px;
text-align: center;
padding-bottom: 20px;
padding-top: 20px;
font-size: 17px;
/*background-color: yellow;*/
}
@media (min-width: 500px){
.Header.Box{
display: grid;
grid-template-columns: 1fr;
}
}
#One img{
width: 100%;
height: auto;
}
@media (min-width: 500px) {
.Second.Row{
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 320px) {
h1{
display: grid;
grid-template-columns: 1fr 1fr;
font-size: h2;
}
}
@media (max-width: 320px) {
#One img{
display: grid;
grid-template-columns: 1fr;
width: 200px;
height: auto;
}
}
@media (min-width: 500px) {
.Third.Row{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 500px) {
.Fourth.Row{
display: grid;
grid-template-columns: 1fr 1fr;
}
}
【问题讨论】：
标签： css responsive-design media-queries