标头中的css3媒体查询无法正常工作

时间:2014-09-12 14:45:52

标签: css mobile responsive-design media-queries

我有两个样式表,一个用于移动设备,一个用于计算机。 我想默认使用我的移动工作表。

我的标题检查:

 <link rel='stylesheet' media='all' href='css/mobile.css' />
 <link rel='stylesheet' media='screen and (min-width: 580px)' href='css/large.css' />

但是当我在移动浏览器上查看时,我似乎仍在使用我的大样式表! (iphone 4)

2 个答案:

答案 0 :(得分:0)

尝试做这样的事情: (我的代码)

<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)">
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)">
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)">

(仅此而且示例)

答案 1 :(得分:0)

我的问题是iphone似乎调整了内容的大小。

我用过:

<meta name="viewport" content="width=device-width, initial-scale=1">

...防止在手机浏览器中重新调整大小。

在我的媒体查询之前,将此标记放在头部。 现在媒体查询功能正常。