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,可以使用appendremove来实现。

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

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

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