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

时间:2017-02-19 03:27:59

标签: javascript html css mobile desktop

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

例如,当您的视口 1024x768 时,您将显示为桌面尺寸和更多内容构建的第一个导航栏,但如果您的视口较低比该分辨率,显示' 适合移动设备的'导航栏。

1 个答案:

答案 0 :(得分:0)

您可以使用媒体查询:

在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">