html - 当我减小浏览器大小时,为什么 "lounge-mobile.css"样式表没有链接?

标签 html css media-queries

如果我将浏览器大小更改为小于 500 像素,mobile-lounge.css 应该链接(为了测试我在 mobile-lounge 中将 body-background 更改为黑色)。

<head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
    <link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width: 500px)">
    <link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width: 499px)">
    <link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
  </head>

最佳答案

我认为下面的代码会帮助你 CSS 链接会有所帮助,

<link rel="stylesheet" media='screen and (min-width: 201px) and (max-width: 500px)' href="lounge-mobile.css">

关于html - 当我减小浏览器大小时,为什么 "lounge-mobile.css"样式表没有链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57427749/

相关文章:

html - 将纯色背景应用于 p 标签

javascript - 使用原型(prototype)添加无限的输入字段

css - 媒体查询未响应以下(最大宽度 : 568px)

html - Chrome 报告图像 'Invalid Property Value'

responsive-design - 如何在响应式设计中将最大高度设置为图像的原始高度?

css - 是否有任何替代方法可以将图像定位在不同分辨率的特定位置的页面中

css - ipad 3 的媒体查询是什么

javascript - 悬停固定元素时允许在 DIV 中滚动

javascript - Chrome 扩展 - 在全屏视频顶部显示自定义通知/弹出窗口(HTML 元素)

javascript - body 背景图像滑动过渡而不是淡入淡出