Question

我在HEAD中有以下代码，可以针对不同的设备/屏幕尺寸使用不同的样式表：

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">

<!-- mobile stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->

在defaultStyle_mobile.css内作为测试，我添加了*{display: none}以使整个页面空白。我到这里http://www.responsinator.com/查看我的网页，看起来没有使用移动样式表。知道怎么解决吗？

Answer 1

尝试使用以下内容替换您的移动样式表：

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)"     href="theStyles/defaultStyle_mobile.css" />
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)'     href='theStyles/captionStyle_mobile.css' />

如果情况并非如此，则问题出在模拟器上。尝试调整浏览器的大小。

为什么没有使用移动CSS

1 个答案: