CSS3 媒体查询不起作用

标签 css screen media device

我有以下代码:

<link rel='stylesheet' media='only screen and (min-device-width : 1281px)' href='css/screenAllLarge.css' />
<link rel='stylesheet' media='only screen and (min-device-width : 800px) and (max-device-width : 1280px)' href='css/screenSmaller.css' />

它应该适用于 1281 像素及以上的屏幕分辨率。但是当我调整屏幕大小时,它仍然应用相同的 screenAllLarge.css CSS 文件 我还将 media='only screen' 更改为 media='screen 但没有成功。我正在用 Firefox 对此进行测试。

我做错了什么? 谢谢

最佳答案

您必须涵盖两个不同的选项,正确设置间隔

media='only screen and (min-width: 1281px)' href='css/screenAllLarge.css' 
media='only screen and (min-width: 768px) and (max-width: 1280px)' href='css/screenAllSmall.css'

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

相关文章:

android - 在Android上关闭屏幕时以编程方式关闭屏幕

android - 解锁屏幕 Galaxy Nexus ADB

javascript - 如何将 LG 屏幕的列表显示为 3 列,SM 屏幕的列表显示为 1 列

java - JMF:当玩家播放视频达到一定时间时如何触发事件?

html - 如何在 html 中嵌入 wave 文件(跨平台)

javascript - 使用 js 加载 css 样式表来更新已渲染网页的样式

jquery - 未应用自动完成

javascript - 随着用户不断输入,动态增加文本区域高度(没有滚动条)

android - React Native Flat List 调整元素大小

android - 如何从 Android 中的视频文件中分离音频流比特率?