Question

我正在使用doc的主要媒体断点：

<!-- 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文件中时，代码套件运行并且Chrome刷新并且所有内容都很好。但是，当我刷新浏览器时，不会应用所有样式。存在css文件但未应用任何内容。当我在该文件中有一个带有媒体查询的screen.scss文件时，一切正常，但现在它们被拆分，没有什么适用。我在这里缺少什么？

Answer 1

我在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)"/>

保存scss文件但不在浏览器刷新时应用SASS样式

1 个答案: