我的两个样式表遇到了一些问题。 我一直在努力让我的网站适合移动设备,所以我为移动设备创建了一个单独的 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
提前致谢!
最佳答案
您有什么理由不简化您的生活并将您的两个样式表合并为一个?
看看这是否对您有帮助: 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;
}
}
关于html - 表格不是为移动设计的 | CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41526027/