0

一直在通过 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" />

亲切的问候

4

1 回答 1

1

在移动样式表媒体查询的末尾有以下规则：only screen and (max-width:854px). 当浏览器的大小调整到 855 像素以下时，这将应用样式表。如果您只想将样式表应用于宽度为 854 像素或更小的设备，请max-device-width仅使用该属性。

于 2012-12-31T00:01:48.627 回答