Question

我的两个样式表遇到了一些问题。我一直试图让我的网站移动友好，所以我创建了一个单独的移动CSS文件。像这样：

    <link rel="stylesheet" type="text/css" media = "screen" href="css/services.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type= "text/css" href="css/mobile/services.css" 
    media ="only screen and (max-width: 500px)" />

除了我遇到一个问题，用一个特定问题的移动设备覆盖主CSS文件（只有一个部分没有覆盖;其他一切都很好）。

在＆＃34; css / services.css＆＃34; （主要的）我有：

#pricing{
    margin: 0px;
}
.pricing_tables{
    width: 600px;
    margin-bottom: 100px;
}

在＆＃34; css / mobile / services.css＆＃34; （移动版）我有：

#pricing{
    width: 270px;
}
.pricing_tables{
    margin: 0 auto;
    width: 270px;
    margin-bottom: 30px;
}

基本上，我无法将其更改为宽度更小。但直到现在我还没有遇到任何问题。

我试图改变的元素是一张桌子。 #pricing也设置为宽度：270px

提前致谢！

Answer 1

你有什么理由不简化你的生活并将你的两个样式组合成一个？

看看这是否有助于您： http://codepen.io/panchroma/pen/BpNMvz

CSS

#pricing{
    margin: 0px;
}
.pricing_tables{
    width: 600px;
    margin-bottom: 100px;
}

@media screen and (max-width: 500px) {

  #pricing{
    width: 270px;
  }
  .pricing_tables{
    margin: 0 auto;
    width: 270px;
    margin-bottom: 30px;
  }

}

表没有为移动设备风格| CSS

1 个答案: