[英]Media query doesn't seem to work
I'm working on a website and am trying to use media queries to make my website work for both mobile and desktop. 我正在一个网站上工作,并且正在尝试使用媒体查询来使我的网站在移动设备和台式机上都能正常工作。 I have a floating menu bar for my desktop site, and I want this menu bar to be relative for the mobile site. 我的桌面网站有一个浮动菜单栏,我希望该菜单栏与移动网站相对。
So in my CSS file I have these lines: 因此,在我的CSS文件中,这些行如下:
/*For desktop*/
nav#menubar {
position: fixed;
top: 0px;
}
/*For iPhone 5 */
@media screen and (max-width: 768px){
nav#menubar {
position: relative;
top: auto;
}
}
When I run this the menu bar is relative for both the desktop page and the mobile page. 当我运行此菜单栏时,它与桌面页面和移动页面都是相对的。 However when I comment out the For iPhone 5
media query, the menu bar is fixed for both mobile and desktop as expected. 但是,当我注释掉For iPhone 5
媒体查询时,菜单栏在移动设备和台式机上都是固定的。 Does anyone know why the media query is working for both the desktop and mobile site? 有谁知道为什么媒体查询同时适用于台式机网站和移动网站?
Any help would be greatly appreciated. 任何帮助将不胜感激。
To be sure, did you include a <meta name="viewport" content="...">
tag in your HTML? 可以肯定的是,您是否在HTML中包含<meta name="viewport" content="...">
标记? https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.