Question

我尝试在CSS中使用仅适用于网页首页的媒体查询。首页的ID在其正文中定义为index。这个首页基本上使用了两列（.aside和.main），我希望在首页上避免它，但仍然在其他页面上使用它。

当我在没有指定ID的情况下尝试此CSS时，.aside列确实会离开（在所有页面上），但是一旦我尝试添加#index（仅在首页使用此列）它停止工作。

@media only screen and (min-width: 500px) {
    #index {
        .aside.col-lg-pull-9 {
            right: 100% !important;
        }
        .main.col-lg-push-3 {
            left: 0% !important;
        }
        .aside.col-lg-3 {
            width: 0% !important;
        }
        .main.col-lg-9 {
            width: 100% !important;
        }
    }
}

Answer 1

处理这个问题的理想方法是Hidden Hobbes所说的 - 使用SASS之类的预处理器。 SASS被转换为CSS，然后加载浏览器。它消除了重复的CSS，使开发更快，代码更容易理解。

根据您正在开发的框架（如果有），您应该能够找到要在项目中使用的相应SASS / SCSS模块。如果您目前没有使用框架，我可以部分推荐HarpJS，其中包括CSS和HTML的几个预处理模块。

参考文献：

SASS：http://sass-lang.com
HarpJS：http://harpjs.com

Answer 2

添加#index的建议很好，但我在前面的代码中保留了一个错误（aside和main之前的点），下面的代码效果很好，它允许我根据实际查看链接的事实有条件地格式化网页。

  @media only screen and (min-width: 500px) {
   #index aside.col-lg-pull-9 {
    right: 100% !important;
   }
   #index main.col-lg-push-3 {
    left: 0% !important;
   }
   #index aside.col-lg-3 {
    width: 0% !important;
   }
   #index main.col-lg-9 {
    width: 100% !important;
   }
}

针对特定ID的CSS媒体查询

2 个答案:

参考文献：