Html css布局-Web移动支持

我有一个类似的页面：

我的问题是关于移动支持，我应该如何做以下工作：

当用户将窗口调整到智能手机屏幕大小时，我想删除主要内容，即页眉区域/登录下方的所有内容，只保留页眉、登录表单和页脚。所以我一直在使用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>

+-------在此处形成标记------+
|..... |
+ ----------------------------+
这是我想要放置登录表单的地方

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

我是否应该创建另一个css文件，并在检测到屏幕宽度高度为智能手机大小时链接/应用该文件

我是否应该在主内容中创建标记块，并将其css样式显示设置为“无”，直到屏幕大小调整为smartphone大小，其中媒体查询设置为更改显示属性

实现这一目标的最佳方式是什么？我非常感谢任何帮助，至少是一些小的解释来证明这个答案。此外，链接和其他参考是非常欢迎的

---

干杯。

我可以看到实现目标的两种方法：

将您的登录表单从header div中取出，放到main content div中，绝对定位，使其在桌面屏幕上显示在header中，然后使用媒体查询将其移动到header下方，以便在移动设备上查看

使用两个登录表单的想法：一个在标题中，另一个在主内容区域中。使用媒体查询更改显示属性，以便根据屏幕大小在正确的时间显示正确的登录表单。我不确定复制登录表单是否是一种好的做法，所以我会尝试从选项1开始

---

让我知道这是否可行

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

这是一份很好的媒体查询备忘单：

我不会像另一张海报所建议的那样，将表单定位为“绝对”并将其放在标题之外。这是非常草率和糟糕的做法。“绝对”形式也将定位在什么位置？尸体？啊。你需要一个包装器——这只是更多的代码。你可以通过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
    }
});

$（窗口）。调整大小（函数（）{
var maxwidth=$（window）.width（）；//获取设备窗口宽度
var form=$（“#登录表单”）；//表单
如果（maxwidth如果登录表单位于页眉内，并且您希望保留页眉和登录表单，那么问题出在哪里？问题是，由于登录表单将是页面的主要内容，页眉的高度将根据屏幕大小急剧降低。是的，我已经在使用mediaqueries。您是否建议我创建l登录表单标记，然后使用mediaqueries显示该表单？这不是一种冗余吗？（在同一页中具有相同的标记..）谢谢你的可爱的备忘录，肯定会在未来的项目中使用它。不，不建议。你有点乱。用你现在的结构来做你想做的事情并不容易。但是你想避免重复的代码和绝对的定位。无论如何，你有没有探索CSS框架，比如Bootstrap或PrimeM？这会让你的生活更轻松一些。你可以通过jQuery克隆表单div并将其添加到
#main content
。这也不是最好的做法，但我可以给你举个例子。迈克，我还没有接触css框架，因为我想在深入研究框架之前从内到外了解css。不过，我很快就会使用类似的东西。W如果我真的使用了框架，我会有一个“简洁”的解决方案吗？或者正如你所说，这是一个我必须处理的设计缺陷。关于JQuery解决方案，它听起来很有趣。我很想看看它是如何工作的！干杯！我很难解释事情……哈哈。这篇文章会比我做得更好。你说过你想这么做的对CSS了如指掌？一个框架不应该阻碍你。它甚至可以为你提供学习更多的工具，或者避免一些复杂的CSS问题。虽然这些都是你应该经历的成长烦恼。这两种想法都是不好的做法。重复的代码永远都不好。对页面主体的绝对定位项目也不好。是的这就是我所害怕的！我都是关于最佳实践方法的，我一定会尝试你建议的第一个选项。至于选项2，我也相信冗余标记是一种肮脏的方式，特别是当一个人正在处理大型项目时，它不需要额外的代码行。嗨，迈克·巴威克，你那边有什么建议吗？我很乐意接受你的建议I’我会提出建议，所以请大家踊跃发言。非常感谢！