问：因此，我试图解决添加宽度为480px及以上的媒体断点的难题。我输入了以下代码，但无法正常工作：
@media屏幕和（最小宽度：480像素）{h1 {字体大小：2.5em；}}
但是，当我将代码剪切并粘贴到CSS文档的末尾时，它起作用了。我知道CSS具有级联性质，但是我看不出在文档顶部设置断点有什么区别。
css / main.css
一个 {
文字装饰：无; } ＃包装{最大宽度：940像素; 保证金：0自动; } ＃标志{文本对齐：中心; 边距：0 ; } h1 ，h2 { color ：#fff ; } NAV一个{颜色：#FFF ; } NAV一个：悬停{
颜色： ＃32673f ;
}
h1 { font-family ：Changa One ，sans-serif ; 字体大小：1.75 em ; font-weight ：正常；} img {最大宽度：100 ％；} ＃画廊{ margin ：0 ; 填充：0 ; 列表样式：无；} ＃画廊里{浮动
： 左;
宽度：45 ％; 利润率：2.5 ％; 背景颜色：＃f5f5f5 ; 颜色：＃bdc3c7 ; } nav ul { list-style ：none ; 边距：0 10 px ; 填充：0 ; } nav li { display ：inline-block ; } NAV一个{字体重量：
800 ;
填充：15像素10像素; } 。个人资料照片{显示：阻止; 边距：0自动30像素; 最大宽度：150像素；边界半径：100 ％; } 。contact-info {列表样式：无；填充：0 ; 边距：0 ; 字体大小：0.9
em ;
}
。contact-info a { display ：block ; 最小高度：20像素；背景重复：不重复；背景尺寸：20像素20像素；填充：0 0 0 30 px ; 边距：0 0 10 px ; } @媒体屏幕和（最小宽度：480像素）{
h1 {
font-size ：2.5 em ; } }
答：最好将媒体查询放在其自己的CSS文件中，并命名为例如：sensitive.css。但是将它们放在CSS文件中的任何地方也可以正常工作。我建议将媒体查询放在底部，这样CSS规则的主要部分将首先加载。还请记住，将媒体查询按升序排列，以免混乱级联效果，并且在遇到某些问题时更容易调试。
答：这是因为您还有另一条规则为h1标签（1.75 em）定义了font-size属性。因此，通过将媒体查询放在顶部，第二个h1规则将覆盖媒体查询中定义的规则。
如果将第二个h1规则放置在另一个媒体查询中，该规则仅影响您的第一个媒体查询中未包括的屏幕尺寸，则顺序将无关紧要，并且它们将永远不会相互覆盖。因为您的h1 {font-size：1.75em;}规则不在媒体查询中，所以它会影响所有屏幕尺寸，并覆盖之前的h1标签上的所有font-size规则。
