css - 使输入按钮在移动设备上响应？

Question

所以我有一个按钮应该位于页面的右侧，但是当网站在移动设备上加载时，我希望它在 Logo 的正中间居中但是呈现正确但不完整并且呈现时在桌面上，它呈现在左侧。

这是它在手机上的样子:

桌面:

那么无论如何要实现这个目标？这是一些代码:

 .mainBanner input{
position: relative;
left: 70%;
    }
 #buttonPush{
 height: 35px;
 width: 95px;
 background-color:#1abc9c;
 border: none;
 color: #fff;
 border-radius: 3px;
 font-size: 22px;
 border-bottom: 2px solid #16a085;
 /*position: absolute;
left: 90%;*/


}

这是 HTML 代码:

 <header>
 <div class="mainBanner">
    <img id="mainLogo" src="img/logo.png">
    <!--POST BUTTON-->
    <div id="buttonPost"> <form action="#openModal"><input id="buttonPush" type="submit" value="Post"></form></div>
 </div>

Answer 1

为此，您需要使用 CSS3 媒体查询。

使用它，您可以更改元素的 CSS 属性。这是一个一般的例子:

@media only screen and (max-width: 900px) {
  // properties here..
}

现在，如果您想更改尺寸稍短的屏幕的属性:

@media only screen and (max-width: 300px) {
  // properties here...
}

使用它，您可以在不同的屏幕类型和尺寸上改变网站的风格。您还可以根据屏幕是移动设备还是桌面设备更改主题。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries