根據屏幕尺寸的列數 - 液柱寬度

-2

我的電線穿過這裏。我無法弄清楚如何開始：
根據屏幕大小，我的佈局應該有一定數量的列。應該有對其中的列數改變一些斷點：例如：下面根據屏幕尺寸的列數 - 液柱寬度

3列1024以下的像素

2列低於900像素

1列1200像素

4列低於640像素

在這些斷點之間，列應該是100％寬度，以便屏幕總是被填充（響應）。

任何想法？謝謝！

問候
塞巴斯蒂安

來源

2014-06-10 Zeppr

怎麼樣使用媒體查詢只需根據屏幕尺寸更改列的大小...？ –

值得一讀--- http://www.stephanboyer.com/post/41/fluid-responsive-grid-layouts-in-css –

可以使用css media queries基於屏幕尺寸變化的佈局。對於如：

HTML

<div class='box'></div>

CSS

.box{ 
    display:inline-block; 
    width:24%; 
    height:100px; 
    background:purple; 
} 
@media screen and(max-width:1024px){ 
    .box{ 
    width:32%; 
    } 
} 
@media screen and(max-width:900px){ 
    .box{ 
    width:49%; 
    } 
} 
@media screen and(max-width:640px){ 
    .box{ 
    width:100%; 
    } 
}

JSFiddle

更多閱讀：

來源

2014-06-10 08:21:05

感謝您的快速回答！但有沒有辦法根據屏幕分辨率來處理列數？ – Zeppr

是的，您可以定位列以隱藏，只需在媒體查詢中應用「display：none」即可...... –

我認爲CSS媒體查詢是你在找什麼：

@media (max-width: 640px) { 
    element#id { 
    property: value; 
    } 
} 
@media (max-width: 900px) { 
    element#id { 
    property: value; 
    } 
} 
@media (max-width: 1024px) { 
    element#id { 
    property: value; 
    } 
} 
@media (max-width: 1200px) { 
    element#id { 
    property: value; 
    } 
}

希望這有助於。

來源

2014-06-10 08:15:50 user2949795

-1

嘗試這些JavaScript方法Window Screen

來源

2014-06-10 08:16:49 Valijon

這應該是一個評論，因爲它只是鏈接，它不能自己解決問題... –

根據屏幕尺寸的列數 - 液柱寬度

回答

相關問題