Question

我的index.xhtml

中有以下内容

  style type="text/css" media="screen and (min-width: 500px)"
    @import "style/index.css";
  /style
  style type="text/css" media="screen and (max-width: 500px)"
    @import "style/portable.css";
  /style
  style type="text/css" media="handheld"
    @import "style/handheld.css";
  /style

它在Opera，Opera-Mini，iPhone和一堆手持设备（N70，摩托罗拉）中运行良好但是它拒绝使用Konqueror和Firefox。我该如何解决？（我想将CSS保存在单独的文件中，我并不热衷于在@media screen {}中封装/嵌入大量的CSS。我也不喜欢使用链接，因为样式是我们使用过的在其他页面）

Answer 1

我没有看到使用<link ...>的区别。 @import也会发送请求。

<link media="only screen and (min-width: 500px)" href="style/index.css" />

Answer 2

期待更多失败。如果你不是只针对现代手机，那就忘记了css媒体查询。您可能希望实现服务器端解决方案以找出设备的功能和屏幕

Answer 3

此方法允许您为不了解媒体查询的旧移动设备提供基本样式，然后为智能手机，平板电脑和桌面浏览器添加更高级的CSS。

<link rel="stylesheet" href="css/styles-base.css" />
<!-- for all devices; includes any base ("reset") styles required  -->

<link rel="stylesheet" media="only handheld and (min-width: 300px), only screen and (min-width: 300px)" href="css/styles-modern-300.css" />
<!-- for all modern devices, including "smartphones" -->

<link rel="stylesheet" media="only screen and (min-width: 740px)" href="css/styles-modern-740px.css" />
<!-- for all modern devices with "tablet-sized" and larger viewports (including iPad) -->

<link rel="stylesheet" media="only screen and (min-width: 1000px)" href="css/styles-modern-1000px.css" />
<!-- for all modern devices with "desktop-sized" and larger viewports -->

<link rel="stylesheet" media="only screen and (min-width: 1200px)" href="css/styles-modern-1200px.css" />
<!-- for all modern devices with "larger desktop-sized" viewports -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0;">

如果您想为手机提供样式支持，我会说现代设备的额外几个HTTP请求是您最不担心的。

您也可以使用此jQuery Plugin to help IE along with media queries。

CSS支持手持设备，iPhone和浏览器

3 个答案: