CSS媒體查詢和屏幕分辨率

我試圖讓這些列在這些條件下隱約顯示：CSS媒體查詢和屏幕分辨率

當在手機上 - 顯示（100％）
當在平板電腦上一列 - 顯示兩列（50％）
當桌面上 - 顯示多達將適合

這裏是我的CSS代碼到目前爲止，但它沒有按預期工作：

編輯：我修改了媒體查詢了一下，背景顏色正如預期的那樣變化......但寬度不是。重新迭代......在小設備上，我希望DIV佔用100％的屏幕寬度......在平板電腦上，我希望它們將屏幕分成兩半......在桌面屏幕上，我希望它們能夠在整個寬度上傳播相應的屏幕。

@media screen and (max-width: 35.5em) { /* 568px or less */ 
    div.listing { 
     -moz-columns: 100%; 
     -webkit-columns: 100%; 
     columns: 100%; 
     background-color: red; 
    } 
    } 

    @media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */ 
    div.listing { 
     -moz-columns: 50%; 
     -webkit-columns: 50%; 
     columns: 50%; 
     background-color: orange; 
    } 
    } 

    @media screen and (min-width: 48em) { /* 1024px */ 
    div.listing { 
     -moz-columns: 350px; 
     -webkit-columns: 350px; 
     columns: 350px; 
     background-color: green; 
    } 
    }

來源

2014-10-29 Alex.Barylski

什麼造型踢在寬度48和64em之間的屏幕？另外，如果您使用ems進行測量，爲什麼不將它們用於列寬呢？ – 2014-10-29 14:56:30

您可以提供一個小提琴請 – 2014-10-29 14:56:35

第一件事：確認您有''標記。 – pawel 2014-10-29 14:59:26

我不覺得你可以用百分比這種方式，嘗試輸入1代替100%它等於1列和2代替50%它等於2列

@media screen and (max-width: 35.5em) { /* 568px or less */ 
    div.listing { 
     -moz-columns: 1; 
     -webkit-columns: 1; 
     columns: 1; 
     background-color: red; 
    } 
    } 

    @media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */ 
    div.listing { 
     -moz-columns: 2; 
     -webkit-columns: 2; 
     columns: 2; 
     background-color: orange; 
    } 
    } 

    @media screen and (min-width: 48em){ /* 1024px */ 
    div.listing { 
     -moz-columns: 350px auto; 
     -webkit-columns: 350px auto; 
     columns: 350px auto; 
     background-color: green; 
    } 
    }

小提琴：http://jsfiddle.net/wprdhswr/1/

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

來源

2014-10-29 15:29:04 adriano66

其實喲你的columns完全按照預期工作。查看規格：http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns

問題是column-width是最小值寬度。如果您將列設置爲50%，那麼該列將始終默認爲100%，因爲無論如何，該列總是至少是其容器的一半（我可能解釋了這個問題）。您基本上需要爲平板電腦視圖設置所需的em或px大小。或者，正如Adriano66指出的那樣，設置列數而不是寬度。

@media screen and (max-width: 35.5em) { /* 568px or less */ 
    div.listing { 
     -moz-columns: 100%; 
     -webkit-columns: 100%; 
     columns: 100%; 
     background-color: red; 
    } 
    } 

    @media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */ 
    div.listing { 
     -moz-columns: 2; 
     -webkit-columns:2; 
     columns: 2; 
     background-color: orange; 
    } 
    } 

    @media screen and (min-width: 48em) { /* 1024px */ 
    div.listing { 
     -moz-columns: 350px; 
     -webkit-columns: 350px; 
     columns: 350px; 
     background-color: green; 
    } 
    }

小提琴： http://jsfiddle.net/disinfor/a65pb9re/1/

來源

2014-10-29 15:32:16 disinfor

CSS媒體查詢和屏幕分辨率

回答

相關問題