Html css 布局- Web 移动支持

Question

我有一个类似这样的页面:

我的问题是关于移动支持以及我应该如何进行以下操作:

当用户将窗口大小调整为智能手机屏幕大小时，我想删除主要内容，即页眉区域/登录下方的所有内容，并仅保留页眉、登录表单和页脚。所以我一直在使用 css 媒体查询来做到这一点。我的问题是我的登录表单标记位于标题区域内。

<div id = "header">
 <div id= "logo"><img src =""/> </div>

 +-------form markup here------+
 |<div id= "login-form">..... </div>|
 + ----------------------------+

</div>
<div id= "main-content">
  This is where I want to put the login form
</div>

所以我的问题是，我应该怎么做？

1. 我是否应该创建另一个 css 文件并在检测到屏幕宽度-高度为智能手机尺寸时链接/应用该文件？
2. 我是否应该在主要内容中创建标记 block ，并将其 css 样式显示设置为无，直到屏幕大小调整为智能手机大小，媒体查询设置为更改显示属性？

实现此目标的最佳方法是什么？我非常感谢任何帮助，至少，一些小的解释来证明这个答案是正确的。也非常欢迎链接和其他引用资料!

干杯..

Answer 1

使用媒体查询根据设备或设备宽度/高度隐藏和显示内容。

这是一个很好的媒体查询备忘单:

http://stephen.io/mediaqueries/

我不会将表单定位为“绝对”并将其放在页眉之外，正如另一张海报所建议的那样。这是 super 草率和不好的做法。什么是“绝对”形式也将被定位？ body ？啊。你需要一个包装器——这只是更多的代码。您可以通过 CSS 完成这一切。只需使用媒体查询更改标题的 CSS 样式、显示/隐藏元素和重新定位。

或

JQUERY(不是最好的路线，但对于您想要的东西，您是有限的，无需重新设计)。为了便于解释，我保持简单。请注意，我还没有测试过这个:

$(window).resize(function(){
    var maxwidth = $(window).width(); // get device window width
    var form = $('#login-form'); // form

    if(maxwidth <= 320) { // 320 px or whatever you want
        form.clone().appendTo('#main-content'); // clone form and append to main content
        form.eq(0).hide(); // hide first form, the one in the header
    }
    else {
        form.eq(0).show(); // show initial form
        form.eq(1).remove(); // remove cloned form, if set
    }
});