モバイルの最初のレスポンシブデザイン

Question

現在、自分のアダプティブサイトをレスポンシブにするために必要なCSSやその他のものをやり直しています。これまでは自分のラップトップ用のサイトを設計してから、縮小していきました。

私は319x480でサイトの外観を確認できるようになりましたが、今では私の最初のブレークポイントを作る場所がわかります。これについてどうやって行っていますか？私はウィンドウを水平にリサイズするだけで、どこでブレークが必要か、またそれを垂直にする必要があるのか​​を確認する必要がありますか？チュートリアルから私は彼らが常に水平に話しているのを見ましたが、あなたはいくつかのものを逃していませんか？

また、ポートレートモードでよく見えます。私は、ポートレートで600px、1000pxで1つブレークポイントを作ってそれを意味します。 319x480に戻って風景にして、サイトをもう一度展開して、景観モードの新しいブレークポイントを見つけなければなりませんか？

どのように系統的な方法でこれについてお考えですか？私はこれが本当にクールなデザイン方法だと思っており、本当にそれを正しく行う方法を学びたいと思っています。

ありがとうございます！

Answer 1

モバイルを最初に実行している場合は、最小幅のメディアクエリを使用します。デスクトップは最初にmax-widthを使います。ブラウザのウィンドウの高さがリサイズされている場合は、通常、スクロールバーでうまくいきます。あなたは人々が通常水平にスクロールする必要はありません。

例：

.header-title { 
    font-size: 14px; 
} 

@media screen and (min-width: 600px) { 
    .header-title { 
     font-size: 16px; 
    } 
} 

@media screen and (min-width: 1024px) { 
    .header-title { 
     font-size: 18px; 
    } 
} 

Answer 2

すべての主要なブレークポイントを使用すると、ブラウザのコンソールで確認することができます。ここでは、原則として幅の変更のみが表示されます。おそらく垂直方向のサイズ変更はあなたのページにあまり影響を与えません

Answer 3

一般的にCSSレスポンスは横向きです。たとえば、3つの写真が並んでいるグリッドレイアウトがあり、ブラウザの幅が狭すぎる場合は、それらの上に積み重ねて、ビューをスクロールできるようにします。

特に固定/絶対位置または高さの計算を使用している場合は、複数のサイズとアスペクト比でサイトをテストすることをお勧めします。