根据屏幕大小删除列

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种不同的分辨率和设备）。添加一些百分比，你可以有一个非常好的响应网站。