如何实现最小宽度和最大宽度的完美平衡，让我的网页首先获得移动响应？我对上一个问题没有回应，我整个周末一直在努力寻找解决方案:(。我试图让我的网页每个div 在< strong>每个网格行从 500px到0px 占据仅一列并保持其常规非来自 @media query向上的<{1}} 字符。
以下是我的代码笔的链接：https://codepen.io/IDCoder/pen/Xevyqq
这是我的HTML代码：
500px这是我目前的CSS代码：
<html>
<title></title>
<head></head>
<body>
<div class="Main">
<div class="Header Box">
<div id="One">
<img src="https://s1.postimg.org/2gy4am3oov/Satellite_over_earth_2.jpg" width="200px" height="126px"/>
</div>
<div id="Two"><p>ETHERSONIC</p><p>TECHNOLOGIES</p>
</div>
<div id="Three"> blah blah blah blah blah
</div>
</div>
<div class = "Second Row">
<div class="About Us">
Technology you can trust
<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/6gklvjubvz/switches.png" width="300" height="300"/>
<p>
Network Installation |
Low Voltage Cabling
</p>
</div>
</div>
<div class="Fourth Row">
<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 class ="Slideshow Description">
<p>
We are Installation Experts! <br>
Offering Customized Installation for Both Residentials and Commercial Properties
</p>
</div>
</div>
</div>
</body>
</html>
我尝试实现的目标是让网页每个网格行 每个网格行仅占据一列从 body{
margin: 5px 125px 0 125px;
}
.Main{
display: grid;
grid-template-columns: 1/1r;
/*background-color: green;*/
}
div.Main{
/*box-sizing: border-box;
width: 100%;
border: 0.125em solid black;
overflow: hidden;*/
}
.Header.Box {
display: grid;
grid-template-columns: repeat(3, 1fr);
/*background-color: red;*/
grid-gap: 0;
}
.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: repeat(2, 1fr);
}
.Third.Row{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 25px;
/*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;*/
}
@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%; }
}
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: 10s slidy infinite;
}
.Slideshow.Description{
font-size: 1.25em;
}
@media (min-width: 500px){
.Header.Row{
display: grid;
grid-template-columns: repeat(1, 1fr);
}
}
/* Second Row*/
@media (max-width: 500px) {
.Second.Row{
display: grid;
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 500px) {
.About.Us{
font-size: 10px !important;
}
@media (min-width: 320px) {
.About.Us{
font-size: 12px;
}
@media (min-width: 500px) {
.BBB.VOSB img{
width: 200px;
height: 124px;
display: grid;
}
}
/*Third Row*/
@media (max-width: 500px) {
.Third.Row{
display: grid;
grid-template-columns: repeat(1, 1fr);
}
}
@media (min-width: 320px) {
.Fourth.Row{
display: grid;
grid-template-columns: repeat(1, 1fr);
}
}
到500px ，同时从 0px向上保持常规非@media query 字符 ..提前感谢您的帮助！