Question

链接到我的代码以查看问题：https://jsfiddle.net/0sbcdfLk/2/

我正在使用引导响应式登录表单模板，该模板也用于设计登录屏幕。我已经复制了代码的formContent部分两次，所以我现在有2个容器，但是我希望第二个容器在移动设备上通常和左侧对齐。

我可以将其向左对齐，但这会使手机上的设计混乱。响应式设计的最佳实践是什么？这是我正在使用的https://bootsnipp.com/snippets/X2bG0

的确切引导模板

我已复制了这段代码

    <div id="formContent">
<!-- Tabs Titles -->

<!-- Icon -->
<div class="fadeIn first">
  <img src="https://www.b-cube.in/wp-content/uploads/2014/05/aditya-300x177.jpg" id="icon" alt="User Icon" />
  <h1>Aditya News</h1>
</div>

<!-- Login Form -->
<form>
  <input type="text" id="login" class="fadeIn second" name="login" placeholder="username">
  <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
  <input type="submit" class="fadeIn fourth" value="Log In">
</form>

<!-- Remind Passowrd -->
<div id="formFooter">
  <a class="underlineHover" href="#">Go to the Site</a>
</div>

我可以在底部的margin: -50% 0px -6px -95%中添加一种样式，该样式在PC上可以正常使用，但在移动设备上基本上不在屏幕的一半，并且溢出了第一种形式。

Answer 1

使用“ CSS @media”规则。按窗口宽度断开CSS。您可以为不同的设备屏幕尺寸定义@media规则，以适合移动设备，平板电脑，PC和宽屏。使用它们，您可以像平常一样操作所有东西。在HTML中为表单内容div设置类（有多个ID，即使使用一次，类也更适合样式设置）：

<div id="formContent" class="account-details">

添加媒体规则以在足够宽的屏幕上在左侧显示表单：

@media only screen and (min-width: 1400px) {
  .account-details{
    position: absolute !important;
    left: 0;
    margin-left: -150px;
  }
}

编辑：工作示例https://jsfiddle.net/y2sgobLz/

对齐内容并使响应保持响应的最佳方法是什么

1 个答案: