css @media移动/桌面：确保桌面不显示移动的CSS

Question

只是通过CSS制作网站的移动重新设计。

有服务了相应的CSS为台式机或移动

但以下媒体查询，台式机仍然会显示移动CSS（尽管它似乎只是一些移动CSS文件）时，浏览器855下调整

你如何确保桌面永不加载移动的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" /> 

亲切的问候

Answer 1

你必须在你的手机样式媒体查询的末尾以下规则：only screen and (max-width:854px)。这适用于浏览器在855px下调整大小时的样式表。如果您只希望将样式表应用于宽度为854px或更小的设备，则仅使用max-device-width属性。