移动到较小的屏幕尺寸时，我网站上的按钮无法正确调整大小。
在台式计算机上，它们看起来还不错。但是，我也在努力使该网站在移动设备上看起来也不错。我不确定在移动屏幕上该怎么办。第一张图片是缩小屏幕尺寸时发生的示例。第二张图片是我正在寻找的过渡。我是创建网站的初学者，因此对您的帮助将不胜感激！
#square-wrapper {
width: 100%;
height: 100px;
text-align: center;
}
#first-square {
width: 25%;
min-width: 170px;
max-width: 100%;
height: 75px;
background-color: #e0dbdb;
border-radius: 5px;
margin-top: 20px;
margin-left: 2.450px;
margin-right: 2.450px;
margin-bottom: 20px;
float: left;
border: 2px solid #23a4de;
box-shadow: 3px 4px 6px 0px #d8d8d8;
display: inline-block
}
#second-square {
width: 25%;
min-width: 170px;
max-width: 100%;
height: 75px;
background-color: #e0dbdb;
border-radius: 5px;
margin-top: 20px;
margin-left: 2.450px;
margin-right: 2.450px;
margin-bottom: 20px;
float: left;
border: 2px solid #23a4de;
box-shadow: 3px 4px 6px 0px #d8d8d8;
display: inline-block
}
#third-square {
width: 25%;
min-width: 170px;
max-width: 100%;
height: 75px;
background-color: #e0dbdb;
border-radius: 5px;
margin-top: 20px;
margin-left: 2.450px;
margin-right: 2.450px;
margin-bottom: 20px;
float: left;
border: 2px solid #23a4de;
box-shadow: 3px 4px 6px 0px #d8d8d8;
display: inline-block
} <div id="square-wrapper">
<div id="first-square">
<a="" href="/pages/order-lookup">
<div id="track-order-box" class="half-box"><span>Button 1</span>
<img src=""></a>
</div>
</div>
<div id="second-square">
<a="" href="/pages/order-lookup">
<div id="track-order-box" class="half-box"><span>Button 2</span>
<img src=""></a>
</div>
</div>
<div id="third-square">
<a="" href="/pages/order-lookup">
<div id="track-order-box" class="half-box"><span>Button 3</span>
<img src=""></a>
</div>
</div>
</div>
答案 0 :(得分：0)
有很多需要解压缩的内容，很多基本的语法错误使您不知所措。
例如：<a=""是不正确的html。
您也有一个重叠的标签，如下所示：
<div> <a> </div> </a>
这也不是正确的html。
您可以拥有：
<div> <a> </a> </div>
或：
<a> <div> </div> </a>
您的问题之所以被否决，是因为人们在堆栈溢出时非常刻薄，任何没有明确答案的问题通常都会很快被拒绝。如果您是初学者，那么不了解基本知识就很难问什么样的问题。
我真的建议您按照html，css和javascript进行在线课程。基础。有一天，只需单击一下，您就会发现自己可以很快地学到东西。即使是专业的编码人员，也要花费一半的时间来复制和粘贴他们在Google上找到的内容，因此知道如何提出问题实际上是其中很大的一部分。希望对您有帮助。
答案 1 :(得分：0)
您好，这是解决方案，基本思想是您需要媒体查询，这些查询是在屏幕尺寸低于特定阈值时触发的。有关更多信息，请参见link，其中明确说明了您需要执行的操作。
#square-wrapper {
width: 100%;
height: 100px;
text-align: center;
}
#first-square {
width: 25%;
min-width: 170px;
max-width: 100%;
height: 75px;
background-color: #e0dbdb;
border-radius: 5px;
margin-top: 20px;
margin-left: 2.450px;
margin-right: 2.450px;
margin-bottom: 20px;
float: left;
border: 2px solid #23a4de;
box-shadow: 3px 4px 6px 0px #d8d8d8;
display: inline-block
}
#second-square {
width: 25%;
min-width: 170px;
max-width: 100%;
height: 75px;
background-color: #e0dbdb;
border-radius: 5px;
margin-top: 20px;
margin-left: 2.450px;
margin-right: 2.450px;
margin-bottom: 20px;
float: left;
border: 2px solid #23a4de;
box-shadow: 3px 4px 6px 0px #d8d8d8;
display: inline-block
}
#third-square {
width: 25%;
min-width: 170px;
max-width: 100%;
height: 75px;
background-color: #e0dbdb;
border-radius: 5px;
margin-top: 20px;
margin-left: 2.450px;
margin-right: 2.450px;
margin-bottom: 20px;
float: left;
border: 2px solid #23a4de;
box-shadow: 3px 4px 6px 0px #d8d8d8;
display: inline-block
}
@media only screen and (max-width: 600px) {
#first-square {
width: 100%;
}
#third-square{
width:48%;
margin:0 0 0 1%;
padding:0;
}
#second-square{
width:48%;
margin: 0 1% 0 0;
padding:0;
}
}
@media only screen and (max-width: 400px) {
#first-square {
width: 30%;
margin: 10px 30% 0 30%;
}
#third-square{
width:30%;
margin: 10px 30% 0 30%;
}
#second-square{
width:30%;
margin: 10px 30% 0 30%;
}
} <div id="square-wrapper">
<div id="first-square">
<a="" href="/pages/order-lookup">
<div id="track-order-box" class="half-box"><span>Button 1</span>
<img src=""></a>
</div>
</div>
<div id="second-square">
<a="" href="/pages/order-lookup">
<div id="track-order-box" class="half-box"><span>Button 2</span>
<img src=""></a>
</div>
</div>
<div id="third-square">
<a="" href="/pages/order-lookup">
<div id="track-order-box" class="half-box"><span>Button 3</span>
<img src=""></a>
</div>
</div>
</div>