一直在通过 CSS 对网站进行移动重新设计。
让以下媒体查询为桌面或移动设备提供适当的 CSS
但是,当浏览器调整到 855 以下时,桌面仍然会显示移动 css(虽然看起来只是一些移动 css 文件)
如何确保桌面永远不会加载移动 css?
谢谢
<link rel="stylesheet" type="text/css" href="css/layout.css" media="Screen and (min-device-width:855px),projection" />
<link rel="stylesheet" type="text/css" href="css/nav.css" media="Screen and (min-device-width:855px),projection" />
<link rel="stylesheet" type="text/css" href="css/type.css" media="Screen and (min-device-width:855px),projection" />
<link href="css/mobile.css" type="text/css" media="handheld, handheld and (max-device-width: 854px), only screen and (max-device-width: 854px), only screen and (max-width:854px)" rel="stylesheet" />
<link href="css/mobile-nav.css" type="text/css" media="handheld, handheld and (max-device-width: 854px), only screen and (max-device-width: 854px), only screen and (max-width:854px)" rel="stylesheet" />
<link href="css/mobile-type.css" type="text/css" media="handheld, handheld and (max-device-width: 854px), only screen and (max-device-width: 854px), only screen and (max-width:854px)" rel="stylesheet" />
亲切的问候
最佳答案
您的移动样式表媒体查询末尾有以下规则:only screen and (max-width:854px)
。当浏览器的大小调整到 855px 以下时,这将应用样式表。如果您只想将样式表应用于宽度不超过 854 像素的设备,请仅使用 max-device-width
属性。
关于html - css @media 移动/桌面 : ensuring desktop doesn't show mobile css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14095837/