Question

我对下面的响应式设计有疑问。

根据以下代码＆amp;在js小提琴中也显示，默认情况下，在桌面上，我希望锚点显示“名称”和“ “登录时间”。当分辨率低于480px时，“登录时间”不应显示在锚点中，而应显示为ul中的第一个列表项目。所以，为了达到这个目的，我创建了一个额外的li作为第一个元素，它是隐藏的，当它在桌面上时，一旦分辨率低于480px，它就会显示出来并且锚点中的“登录时间”被隐藏。

我怀疑的是，这是否是获得此功能的正确解决方案，因此，我需要在2个位置复制“登录时间”html，尽管一次隐藏一个。

http://jsfiddle.net/M7J4q/2/

HTML：

<div>
    <a href="#">
        <p>Name</p>
        <p>Login Time</p>
    </a>
    <ul>
        <li>Login Time</li>
        <li>Help</li>
        <li>About</li>
        <li>Log out</li>
    </ul>
</div>

CSS：

a {text-decoration:none; display:block; background:#333; color:#fff}
p{ margin:0px;}
ul{list-style-type:none; padding:0; background:#999}
ul li:first-child {display:none}

@media (max-width:480px){
a p:last-child {display:none}
ul li:first-child {display:block}
}

Answer 1

据我所知这是完美的解决方案。据我所知，没有其他方法可以实现这一点（仅限CSS）。

如果您希望使用jQuery，可以使用append和remove来实现。

我比jQuery更喜欢这个CSS解决方案。

是的，您必须在两个地方保留相同的代码，但在这种功能中，这是可以接受的。

需要解决这个简单的响应式设计要求 - 在断点上移动DOM元素

1 个答案: