Question

我有一个Python程序，它使用mod_python从MySQL检索数据库条目并以HTML格式显示它们。此网页最终为一个包含四列的表格，跨越整个页面。（我用CSS格式化了它）

如果屏幕宽度低于一定像素数，是否可以使用CSS更改列数？这四列中的一列中包含大量信息，并且不希望在移动屏幕上查看它。文本看起来很小，难以阅读，放大也不方便。我想知道，如果屏幕尺寸小于800px，是否可以使用css或其他东西删除此列？因此，在iPhone 3g上，该表在较大的屏幕上只显示三列而不是四列。这将使文本在旅途中更容易阅读。

Answer 1

是的，这很容易。您可以使用媒体查询来执行此操作：

@media screen and (max-width: 800px) { your styles here }

因此，在您的情况下，您的css将具有该列的样式，例如.column4 {display:block;}，之后您的媒体查询：

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

   .column4 {
       display:none;
   }

}

您可以针对不同的屏幕尺寸进行不同的查询（在我的最新项目中，我使用了6种不同的布局，针对6种不同的分辨率和设备）。添加一些百分比，你可以有一个非常好的响应网站。

根据屏幕大小删除列

1 个答案: