我对下面的响应式设计有疑问。
根据下面的代码和 js fiddle 中显示的代码,默认情况下,在桌面上,我希望锚点同时显示“名称”和“登录时间”。当分辨率低于 480px 时,“登录时间”不应显示在锚点中,而是应显示为 ul 中的第一个列表项。因此,为了实现这一点,我创建了一个额外的 li 作为第一个元素,它是隐藏的,当在桌面上并且分辨率低于 480 像素时,它就会显示出来并且锚点中的“登录时间”被隐藏。
我的疑问是,这是获得这个东西的正确解决方案吗,至于这个,我需要在 2 个地方复制“登录时间”html,尽管一次隐藏一个。
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}
}