header 中的 css3 媒体查询不起作用

标签 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)

最佳答案

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

<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)">

(只是例子)

关于 header 中的 css3 媒体查询不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25810973/

相关文章:

css - 防止 Bootstrap 导航栏显示多行而不折叠成图标

css - 使用 ng-hide CSS transition 填充偏移高度

ios - 当 BLOC 中的流值发生变化时导航到新屏幕

android - 有没有办法在 flutter 中为 DropdownButton 添加标签?

ios,需要购买实体产品才能开始使用应用程序

java - Oracle对我们有什么期望?

html float 底部

html - 响应图像定位在另一个图像上

html - 标题高度与流体布局

html - 当页面尺寸较小(手机宽度)时,文本与按钮不对齐。文本顶部与按钮中心对齐,而不是顶部