根據屏幕大小刪除列

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種不同的分辨率和設備）。添加一些百分比，你可以有一個非常好的響應網站。