Javascript 在移动或桌面上使用不同的导航栏样式
有没有办法根据导航栏的视口更改导航栏Javascript 在移动或桌面上使用不同的导航栏样式,javascript,html,css,mobile,desktop,Javascript,Html,Css,Mobile,Desktop,有没有办法根据导航栏的视口更改导航栏 例如,当您的视口为1024x768时,您将显示第一个为桌面大小和更多尺寸构建的导航栏,但如果您的视口低于该分辨率,则显示“移动友好”导航栏。您可以使用媒体查询: 在CSS中: @media (min-width:768px) and (min-height:1024px) { /*Desktop css*/ } @media (max-width:768px) and (max-height:1024px) { /*Mobile css*/ } 或使用
例如,当您的视口为1024x768时,您将显示第一个为桌面大小和更多尺寸构建的导航栏,但如果您的视口低于该分辨率,则显示“移动友好”导航栏。您可以使用媒体查询: 在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">
查找CSS媒体查询。检查此处: