0

ドキュメントの先頭で主要なメディアブレークポイントを使用しています：

<!-- 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)”/>

4つのスタイルシートは、いくつかの_partialsで構成されています。scssファイルの1つに保存すると、コードキットが実行され、Chromeが更新され、すべてが正常にレンダリングされます。ただし、ブラウザを更新すると、すべてのスタイルが適用されません。cssファイルは存在しますが、何も適用されません。1つのscreen.scssファイルにそのファイル内にメディアクエリが含まれている場合はすべて正常に機能しましたが、分割されたため、何も適用されません。ここで何が欠けていますか？

4

1 に答える 1

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)"/>
于 2012-09-07T20:58:55.890 に答える