2016-05-19 8 views
0

ピクセル単位で指定された幅であっても応答可能なサイトが見つかりました。応答的なCSSでピクセル幅を使用する

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

は、ウェブだけでなく、モバイル用の応答 CSSを書くときのパーセンテージの代わりに、ピクセル単位で幅を使用するには、この悪い習慣ですか?

ここで、幅とパーセントのピクセルを使用できるとき、私はここでいくつかのルールを探していました。

+1

明らかです。 25%のアイコンがある場合は、何パーセント使用するべきですか?知ることはできません。他のものは 'em'や' px'の方が良いという質問です。しかし、これは主に意見に基づくものとして閉鎖されるべきである。 –

+0

さらに、レスポンシブとはレイアウトを変更するすべての解像度にデザインが適応することを意味しますが、パーセンテージ測定の使用は明示的でも暗黙的でもありません。 –

+0

この質問は意見が広すぎる、意見に基づいている、またはディスカッションが必要なため、スタックオーバーフローのトピック外です。具体的な、解決可能な、プログラミングの問題がある場合は、詳細を記入してください。 –

答えて

2

適切なレスポンスデザインは通常、ピクセル(または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%; 
} 

使用するハード/ファーストルールではありません。特定のシナリオにはパーセンテージが必要な場合もあれば、正確なサイズを定義する場合もあります。レスポンシブデザインを適切に実行するには、使用可能なツール(パーセンテージまたはピクセル)を使用する必要があります。

+0

'実際の応答ユーティリティクラスはパーセンテージに依存する'完全には真ではない。あなたは負のマージンを見逃しています。そして、埋め込みパディングはそれぞれ-15pxと15pxです。そして、 '.row'は応答性の高いユーティリティクラスです。私は思っています。 –

+1

paddings/marginと' response'ベースのスタイルと考えられる 'row'クラスへの参照が含まれています。 –

+0

今より良い:)私のupvote –

1

pxの代わりにremを使用することができます。これは、基準フォントとしてサイズを基準に使用するため、スケーリングに役立ちます。個人的には、可能な限りパーセンテージを使用していますが、設計時に流体が明示的に設定されている場合があります。

関連する問題