html - 第二个@media 查询不工作

标签 html css media-queries

我在一个网站上工作,我想使用媒体查询在两种不同的屏幕尺寸下更改一些 css。我希望 new new css.css 成为主 css,然后 medium.css 中的规则在 955px 和 650px 之间的屏幕宽度和 small .css 在屏幕宽度低于 650px 时启动

这是我 HTML 中样式表的链接

<link href="new new css.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width: 955px) and (min-width: 650px)" href="medium.css" />
<link href="small.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 650px) />

medium.css 工作正常,但低于 650px,页面返回到仅使用 new new css.css 并且 small 中没有任何规则.css 应用

最佳答案

这部分没有结束引号:

type="text/css" media="only screen and (max-width: 650px) />

应该是

type="text/css" media="only screen and (max-width: 650px)" />

关于html - 第二个@media 查询不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27369833/

相关文章:

html - 如何获取图像作为部分的背景

javascript - 在基于 HTML5 的游戏中使用 Javascript Cookie 跟踪 HP

JQuery 导航粘性

html - 设置宽度等于高度

javascript - 将图像附加到 <td> 标签时如何使用动画缓慢移动图像

html - 移动设备扭曲了我网站上的页面

html - 在网络上定位使用 ios 5 的用户

javascript - 媒体查询和javascript调整大小事件之间的区别

jquery - 我怎样才能使单选复选框向任何方向移动@media - css

javascript - tinyMCE 在全屏模式下默认显示 HTML 代码