Question

我的所有桌面都有 style_desktop.css ，移动设备有 style_mobile.css 。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" media="screen and (min-device-width:781px)" type="text/css"
      href="style_desktop.css"/>
<link media="only screen and (max-device-width: 780px) and (min-device-width: 320px)"
      href="style_mobile.css" type="text/css" rel="stylesheet"/>

除IE 8及以下版本外，上述代码工作正常。我想这是因为IE 8及以下版本无法识别＆＃34;（min-device-width：781px）＆＃34;

所以我更新了下面的代码，但它仍然无效。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" media="screen and (min-device-width:781px)" type="text/css"
      href="style_desktop.css"/>
<link media="only screen and (max-device-width: 780px) and (min-device-width: 320px)"
      href="style_mobile.css" type="text/css" rel="stylesheet"/>
 <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="style_desktop.css"/>
 <![endif]-->

如果是桌面浏览器，则需要链接 style_desktop.css 。
如果是移动浏览器，则需要链接 style_mobile.css 。

通过测试，我发现条件评论不起作用。

修改
如果它有任何区别，我正在使用wordpress。我为了清楚起见，已从 href 中删除了 get_template_directory_uri（）; 。

Answer 1

您可以尝试为旧版IE启用HTML5和CSS3：

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

IE条件评论不起作用

1 个答案: