我在文档的头部使用了主要的媒体断点:
<!-- Base = Normalize for basic and small screens -->
<link rel="stylesheet" href="css/base.css">
<!-- Enhanced = Styles for devices that understand media queries -->
<link rel="stylesheet" href="css/enhanced.css" media=”screen, handheld” />
<!-- Medium = Devices larger then generlized phone size -->
<link rel="stylesheet" href="css/medium.css" media=”only screen and (min-width:37em)”/>
<!-- Large = Larger tablets and desktops -->
<link rel="stylesheet" href="css/large.css" media=”only screen and (min-width:45em)”/>
<!-- Extralarge = Large displays and tv -->
<link rel="stylesheet" href="css/extralarge.css" media=”only screen and (min-width:60em)”/>
四个样式表由几个_partials 组成。当我保存在其中一个 scss 文件中时，codekit 运行并且 Chrome 刷新并且一切都呈现得很好。但是，当我刷新浏览器时，所有样式都没有应用。 css 文件存在但未应用任何内容。当我有一个带有媒体查询的 screen.scss 文件时，一切正常，但现在它们被分开了，没有任何应用。我在这里缺少什么？
最佳答案
我在您的 HTML 中看到花哨的引号。修复它们应该会导致您的媒体查询被识别:
<!-- Base = Normalize for basic and small screens -->
<link rel="stylesheet" href="css/base.css">
<!-- Enhanced = Styles for devices that understand media queries -->
<link rel="stylesheet" href="css/enhanced.css" media="screen, handheld" />
<!-- Medium = Devices larger then generlized phone size -->
<link rel="stylesheet" href="css/medium.css" media="only screen and (min-width:37em)"/>
<!-- Large = Larger tablets and desktops -->
<link rel="stylesheet" href="css/large.css" media="only screen and (min-width:45em)"/>
<!-- Extralarge = Large displays and tv -->
<link rel="stylesheet" href="css/extralarge.css" media="only screen and (min-width:60em)"/>
关于html - SASS 样式在保存 scss 文件时适用，但在浏览器刷新时不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12325108/