Question

我正在制作像this (jsfiddle)这样的菜单，我希望改进这一点（在调整窗口大小时）：

如果nav右侧没有任何空白，则省略左侧 A ...ohime sama > Ki ga tsuite ne ne > Mataseru nante rongai yo B
A ...suite ne ne > Mataseru nante rongai yo B
但是不省略#currentstage
A ...> Mataseru nante rongai yo B
A ...> Mataseru nante rong（带水平滚动条）

我可以只制作这个HTML + CSS吗？

编辑：我的意思是， this (jsfiddle) 没有Javascript。虽然a.button的每个宽度都是固定的，但nav的宽度不是。它的HTML是可以改变的。所以（我猜）媒体查询不是一个好的选择。

Answer 1

在css中使用媒体查询来识别元素在设备上没有空间显示的点，并指定在下面发生这样的宽度时要做的事情是相应地找到和查询的公共设计宽度的示例。

/* Large desktop */
@media (min-width: 1200px) { /*put your css code here*/

#stage1{

} 
 }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Answer 2

<强> DEMO

这可以使用css3媒体查询来完成。在此处详细了解：Mozilla MDN

以下是您需要做的一个示例：

<强> CSS：

@media (max-width: 480px) {
    nav div {
        display: none;
     }
    #currentstage {
        display: block;
    }
}

希望你能为其他屏幕尺寸做同样的事情

如何首先省略内容的左侧？

2 个答案: