在響應式css中使用像素寬度

我發現網站響應，即使以像素爲單位指定寬度。在響應式css中使用像素寬度

https://github.com/ParsePlatform/parse-dashboard/blob/master/src/components/AppBadge/AppBadge.scss#L22

爲網絡寫響應 CSS時以及移動這是不好的做法，使用像素寬度到位百分比？

所以我在這裏尋找一些規則，我們什麼時候可以使用像素作爲寬度和百分比。

來源

2016-05-19 fortm

很明顯。如果您有25x25的圖標，應該使用多少百分比？不可能知道。其他的事情是更好的'em'或'px'的問題。但是，這應該以主要基於意見爲基礎關閉。 –

此外：響應意味着設計將適應修改佈局的所有解決方案，但不明示或暗示使用百分比度量。 –

這個問題要麼過於寬泛，要麼基於觀點，要麼需要討論，所以堆棧溢出的主題也是如此。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

適當的響應式設計通常需要使用像素（或其他一些度量單位，如em,rem,vw等）以及百分比和媒體查詢。最敏感的設計框架，如Twitter的引導仍然使用像素爲他們的媒體查詢：

/* Example of a Bootstrap Media Query */ 
@media (min-width: 1200px) { 
    .visible-lg-block { 
    display: block !important; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
}

和處理他們的一些響應的實用工具類的依賴與百分比和使用的利潤率/填充：

/* Example of Bootstrap's Responsive Column Classes */ 
.col-xs-1, ... .col-lg-12 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 
.col-xs-12 { 
    width: 100%; 
} 
.col-xs-11 { 
    width: 91.66666667%; 
} 
.col-xs-10 { 
    width: 83.33333333%; 
}

所以有是不是一個硬性/快速的規則使用。某些情況可能需要百分比，其他情況可能需要定義確切的大小。如果您想正確執行響應式設計，則需要使用可用的最佳工具，這可能是百分比，也可能是像素。

來源

2016-05-19 15:24:08

「實際響應的實用程序類依賴於百分比」並非完全正確。你已經錯過了負邊距，正負值分別是'-15px'和'15px'。而'.row'是一個響應式實用程序類。我認爲 –

我已經包含了對paddings/margin以及'row'類的引用，這將被視爲基於響應的風格。 –

現在好了:)我的upvote –

如果需要，可以使用rem而不是px，它可以使用基本字體大小作爲參考點，這可以幫助縮放。就我個人而言，我儘可能使用百分比，但有時候設計需要明確設定寬度，因爲流動不適合您使用的設計。

來源

2016-05-19 15:22:02

在響應式css中使用像素寬度

回答

相關問題