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

Question

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

以下是它在移动设备上的显示方式：

桌面：

所以无论如何要做到这一点？这是一些代码：

 .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