Question

我有一个带有价格等的买卖表格。它在笔记本电脑上看起来很完美，但是当我尝试通过iphone看到它时，我只看到“卖出”按钮和三个输入区域。这是我的CSS：-

#ordersell {
background-color: #a82226;
}

.orderbutton {
text-align: center;
display: flex;
color: #fff;
margin: 0 10px;
vertical-align: middle;
justify-content: center;
align-items: center;
width: 50px;
height: 30px;
line-height: 30px;
text-decoration: none;
font-weight: 700;
cursor: pointer;
border-radius: 3px;
}

*, ::after, ::before {
box-sizing: border-box;
}

form {
 border-style: groove;
 padding: 10px;

}

.input101 {
font-family: Poppins-Medium;
font-size: 15px;
line-height: 1;
color: #666666;
display: block;
width: 75px;
background: #e6e6e6;
height: 40px;
border: 1px solid #666;
}

label {
display: block;
font-family: "Comic Sans MS", cursive, sans-serif;
color: #09cdf9;
}

#orderbuy {
background-color: #22a826;
}

这是我的HTML代码：-

<div style="display: flex;">
<form method="post" action="usdbtc.php" class="login100-form validate-form" style="width: 500px; height:160px; float:left;">    
<p>
<label style="float: left;">Price:</label>
<input class="input101" style="width: 135px; float: left;" type="text" name="username" id="box1" oninput="calculate()">
<label style="float: right;">: BTC</label>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="box2" oninput="calculate()"><br>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="result"><br>
<label style="padding: 10px;">Total BTC:</label>
<td rowspan="2"><br>
<span class="orderbutton" type="submit" id="ordersell">SELL</span>
</p>
</td>
</form>
<form method="post" action="usdbtc.php" class="login100-form validate-form" style="width: 500px; height:160px; float:right;">
<p>
<label style="float: left;">Price:</label>
<input class="input101" style="width: 135px; float: left;" type="text" name="username" id="box3" oninput="calculate()">
<label style="float: right;">: BTC</label>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="box4" oninput="calculate()"><br>
<input class="input101" style="width: 135px; float: right;" type="text" name="username" id="resul"><br>
<label style="padding: 10px;">Total BTC:</label>
<td rowspan="2"><br>
<span class="orderbutton" type="submit" id="orderbuy">BUY</span>
</p>
</td>
</form>
</div>

有什么想法如何在移动显示中正确显示它？看起来，只要屏幕尺寸低于600px，它就会发生。感谢您的帮助。

Answer 1

使用@media规则有助于使您的设计具有响应能力。但是看起来您正在将内联css用作“ style="width:50px;height:50px”

您必须为相应的div或html元素提供id或class，以便可以使它们响应，如下所示：

对于小于600像素的显示器，您要做的就是在media内添加css，例如：

@media only screen and (max-width:600px){
   /* then insert your css elements  */
   .yourclass{
    width:100%;
  }
   .yourid{
  width:100%;
  }
  input[text]{
  width:100%;
  background:green;
}
/*etc*/
}

例如，这是jsfiddle：http://jsfiddle.net/s4yeof9c/ 尝试调整大小

希望这会有所帮助：）

@media only screen and (max-width:445px){
/* all css here goes for mobile .. i'm not sure about how much pixel though :D */
}

@media only screen and (max-width:800px){
/* all css here goes for tablets */
}

@media only screen and (max-width:1366px){
/* all css here goes for screens with 1366px */
}

以此类推。

制作移动友好的HTML表单

1 个答案: