レスポンスレイアウトの作成

Question

ブートストラップを使用してレスポンシブウェブページを作成しようとしていますが、スタート方法がわかりません。

はここに私のコードdownvotesにもかかわらず
https://jsfiddle.net/c30a7bd2/
It should be responsive for all the devices.

Answer 1

あり、ここであなたが始めるためにいくつかの情報です。

プロセス：最小のビューポートから最大まで

デザイン。すなわち、モバイルデバイスのための最初のレスポンシブサイトを肖像画、次にモバイルランドスケープ、次にタブレットの肖像画、次にタブレットの風景、次に最も小さいデスクトップ、次に最大のデスクトップのように設計する。 Chrome開発ツールを見ると、矢印アイコンの左上にアイコンが表示されます。これにより、最も一般的なデバイスをリストするレスポンシブデザインモードになります。非常に役立ちます。

はメディアクエリについて学ぶ：

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

正しく@mediaクエリを使用する方法についての愚かな多くの混乱があります。私は最初からまっすぐにあなたを置かせてください。

min-widthについて心配する必要があります。範囲について考えるのではなく、最小幅以外のものを使用しないでください。

ここに理由があります。ブラウザの幅は、我々がやっているすべては、以前の設定スタイルをオーバーライドで増やすよう

我々は最小のデバイスからの私達のCSSを書いているのでは、は、第1の幅。それでおしまい。これは、文字通り、偉大で簡単な応答のあるCSSコーディングを行う秘密です。

使用するブレークポイントは何：再び

、巧妙な技術者の多くは、あまりにも巧妙になろう。彼らは奇数のブレークポイントを導入し、ピクセル 'px'の定義などを避けようとします。

私たちはコードのモバイル肖像画を最初に書いているので（最小のデバイスサイズ）、このためのメディアクエリはありません。そのただのCSS。

/* all mobile portrait coding goes first */ 

@media all and (min-width: 480px) { 
    /* this is the most common mobile landscape minimum width */ 
} 

@media all and (min-width: 768px) { 
    /* this is the most common minimum tablet width */ 
} 

@media all and (min-width: 1024px) { 
    /* this is the most common minimum desktop width. It also is the 
    most common minimum tablet landscape width. */ 
} 

@media all and (min-width: 1300px) { 
    /* this is the most common minimum wide desktop width. 
    This is the only media query you might consider setting to 1200px 
    if your graphic design requires it. */ 
} 

それだ：ここで

は、あなたが開始する必要がブレークポイントです。それは非常に文字通りあなたが知っているすべての素晴らしい応答するCSSを書くことを知っている。

キーコンセプトが継承を利用していることを覚えておいてください。あなたのCSSの80％は、おそらく携帯のポートレートサイズのために書かれているはずです。これらのスタイルはすべて、より広いスクリーン幅に継承されます。次に、新しいより広い画面で必要に応じてオーバーライドします。あなたのメディアクエリが増加するにつれて、そこにcssが少なくなることがわかります。

素晴らしいコードを書いてください！