2016-11-12 59 views
3

我正在閱讀flexboxgrid的源代碼,我偶然注意到了這一點。爲什麼flexboxgrid有媒體查詢?

col-xscol-smcol-lg常見的風格是一樣的:

.col-xs, 
.col-xs-1 
{ 
    box-sizing: border-box; 
    flex: 0 0 auto; 
    padding-right: 0.5rem; 
    padding-left: 0.5rem; 
} 

每個.col-[gridSize]-[columnSize]的風格不會改變,只要我們只改變gridSize

.col-xs-1 { 
    flex-basis: 8.33333333%; 
    max-width: 8.33333333%; 
} 

.col-md-1 { 
    flex-basis: 8.33333333%; 
    max-width: 8.33333333%; 
} 

.col-lg-1 { 
    flex-basis: 8.33333333%; 
    max-width: 8.33333333%; 
} 

同樣爲.col-[gridSize]-offset-[offsetNum]看起來像:

.col-xs-offset-1 { 
    margin-left: 8.33333333%; 
} 

.col-md-offset-1 { 
    margin-left: 8.33333333%; 
} 

.col-lg-offset-1 { 
    margin-left: 8.33333333%; 
} 

唯一的區別是xs未包裝在媒體查詢中,而smmd包裝在media queries中。我將這個庫轉換爲css-in-js,如果CSS是相同的,爲什麼包裝它在媒體查詢?

+0

我沒有多少讀到flexboxgrid,但最有可能'xs'不在媒體查詢中,因爲它可能是一個移動的第一個框架,就像Bootstrap一樣。一般的想法是,你根據它在移動設備上的外觀設計進行設計,然後開始構建它(這就是爲什麼它被稱爲**移動第一**)。而不是其他方式,從桌面到移動設備。 – Ricky

+0

我不覺得這需要一個答案,你可以看看[**移動第一**](http://ux.stackexchange.com/a/35317),如果你有任何疑問,我們來這裏幫幫我。 – Ricky

+0

@Ricky_Ruiz我讀到'%'元素的工作基於父母的寬度,這將是容器流體,如果在'rem'中定義的屏幕或容器佔據整個寬度。你能告訴我更多關於'.col-sm-1'如何與'.container'交互的方法,它的寬度通過'rem'中的媒體查詢來解決嗎? – vamsiampolu

回答

0

CSS包裝在媒體查詢中,以便您對每個屏幕分辨率都有不同的行爲。這是響應式設計的孔本質。

xs類未包含在媒體查詢中,因爲它們的樣式將適用於所有屏幕寬度,除非沒有其他任何大小的標記(sm,md,lg)。