在移动设备或桌面上使用不同的导航栏样式

Question

有没有办法根据视口更改导航栏？

例如，当您的视口为 1024x768 时，您将显示第一个导航栏，该导航栏是为桌面尺寸等构建的，但如果您的视口低于该分辨率，则显示“移动友好”导航栏。

Answer 1

您可以使用媒体查询：

在CSS中：

@media (min-width:768px) and (min-height:1024px) {
 /*Desktop css*/
}
@media (max-width:768px) and (max-height:1024px) {
 /*Mobile css*/
}

或使用外部样式表：

<link rel="stylesheet" media="(min-width:768px) and (min-height:1024px)" href="desktop.css">
<link rel="stylesheet" media="(max-width:768px) and (max-height:1024px)" href="mobile.css">

在移动设备或桌面上使用不同的导航栏样式

Different navbar styles when on mobile or desktop

html

javascript

css

mobile

desktop