0

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

根据下面的代码和 js fiddle 中显示的代码，默认情况下，在桌面上，我希望锚点同时显示“名称”和“登录时间”。当分辨率低于 480px 时，“登录时间”不应显示在锚点中，而是应显示为 ul 中的第一个列表项。因此，为了实现这一点，我创建了一个额外的 li 作为第一个元素，它是隐藏的，当在桌面上并且分辨率低于 480 像素时，它就会显示出来并且锚点中的“登录时间”被隐藏。

我的疑问是，这是获得这个东西的正确解决方案吗，至于这个，我需要在 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}
}
4

1 回答 1

1

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

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

我更喜欢这个 CSS 解决方案而不是 jQuery。

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

于 2014-07-09T11:41:26.390 回答