2016.9.25 学習内容に関する雑記

通常の状況では、ネイティブ コードよりもブートストラップを使用してレスポンシブ レイアウトを作成する方が高速です

前回の記事「ブートストラップの実践」の補足:

リーリー リーリー

ウェブ側では、さまざまなブラウザに適応するために互換性を持たせる必要があります。スプライト画像は複数のセットが使用される場合があります。

アプリにはさまざまな画面サイズがあるため、{@media srceen、ブートストラップ、または JS} のスプライト画像もよく使用されます

。

* スプライト画像を使用すると、Web ページの読み込み速度が向上し、複数の画像を 1 つに統合できます

* アダプティブ作業を行う場合、幅はパーセンテージである必要があり、それが避けられない場合は、rem マージンとパディングを使用する必要があります。次に、パーセンテージを使用するのが最善です。

* モバイル版ではメタ ビューポートを追加する必要があります

ユーザーは追加できませんズーム可

携帯電話の様々な画面サイズに合わせたフォントサイズ変換

@media 画面と (min-width: 1242px){html{font-size: 38.8125px;}}

@media 画面と (min-width: 960px){html{font-size: 30px;}} @メディア画面と (max-width: 750px){html{font-size: 23.4375px;}}
@media 画面と (max-width: 640px){html{font-size:20px;}}
@media 画面と(max-width: 414px){html{font-size:12.9375px;}}
@media 画面と (max-width: 360px){html{font-size:11.25px;}}
@media 画面と (max -幅: 320px){html{font-size:10px;}}

画像を使用する場合は、img を div でラップし、img を本体上に裸のままにしないでください

正常なダウングレード

最初は互換性の良いブラウザで Web ページを作成し、互換性の悪いブラウザには徐々に適応します

徐々に強化

最初はブラウザや画面の調整はすべて行われていましたが、基本的な機能のみが完了し、その後コンテンツが徐々に埋められていきました

ブートストラップのコンテナの幅は 100% に固定されています

位置固定属性がナビゲーションと末尾に適用されている場合、中央のコンテンツを配置するときは、位置決めを使用せず、マージンまたはパディングを使用して距離をサポートします。そうしないと、配置された要素が固定ナビゲーションの上に表示され、ナビゲーションがブロックされます。絶対的も相対的も使用できません。結果は自分でテストできます。