html - 表格不是为移动设计的 | CSS

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 文件覆盖主 CSS 文件的问题(只有一部分没有覆盖；其他一切都很好)。

在“css/services.css”(主要的)中我有:

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

在“css/mobile/services.css”(移动版)中我有:

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

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

我要更改的元素是表格。 #pricing 也设置为 width: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;
  }

}