-1

我有一个与此类似的页面：

我的当前页面

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

当用户将窗口大小调整到智能手机屏幕大小时，我想删除主要内容，即标题区域/登录下方的所有内容，只保留标题、登录表单和页脚。所以我一直在使用 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. 我是否应该在主内容中创建标记块，并将其 css 样式显示设置为无，直到屏幕调整为智能手机大小，其中媒体查询设置为更改显示属性？

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

干杯..

4

2 回答 2

2

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

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

http://stephen.io/mediaqueries/

我不会将表格定位为“绝对”并将其放在标题之外，就像另一张海报所建议的那样。这是超级草率和糟糕的做法。什么是“绝对”形式也将被定位？身体？啊。你需要一个包装器——这只是更多的代码。您可以通过 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
    }
});
于 2013-11-11T21:42:15.027 回答
0

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

  1. 将您的登录表单从标题 div 中取出，将其放入 main-content div 并绝对定位以使其在桌面屏幕上显示在标题内，然后使用媒体查询将其移动到标题下方以供查看在移动设备上。

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

让我知道这是否可行！

于 2013-11-11T21:39:11.493 回答