不同的导航栏样式时，在移动或桌面

Question

有没有办法按照自己的视口更改导航栏？

例如，当你的视口1024×768你会显示它内置桌面尺寸和更多第一导航栏，但如果你的视口比分辨率较低，显示“移动友好'导航栏。

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