no-image

モバイル対応のレイアウト


前の言葉

モバイルインターネットの台頭に伴い、さまざまなデバイスの解像度が大きく異なります。同じページが異なる設定で表示される場合、ユーザーエクスペリエンスは低下します。 レスポンシブウェブデザインとは、各端末に特定のバージョンを作成せずに複数の端末とウェブサイトとの互換性を持たせる方法です。 これにより、ウェブサイトをあらゆるタイプの画面で簡単に表示して使用することができます。 レスポンシブデザインでは、ウェブサイトをさまざまなデバイスに再配置して、さまざまなデザインスタイルを表示し、あらゆるサイズのスクリーンに完全に適合させます

デザイン原則

レスポンシブデザインについては、次の2つの設計原則があります。段階的な増加と優雅な劣化

プログレッシブ・エンハンスとは、基本的な要件が満たされ、実装されていることを意味します。異なるブラウザと異なる解像度のデバイスの特性に応じて、高度なブラウザの新機能が使用されます。 たとえば、フィレット、シャドウ、アニメーションなど

既存の機能は十分に開発されていますが、サポートしていないバージョンやブラウザとの下位互換性が必要です。 互換性スキームの経験は従来のスキームのそれほど良くはないが、その機能の利用可能性は保証されている

応答性の高いWebサイトが作成されると、モバイル版が最初に設定され、より複雑な機能が設計され、より大きなデバイス用に開発されます。 この機能は、ページ幅に合わせるために最小幅を使用することです。 スタイルを上から下に記述する場合、最初に考慮すべき点はモバイルデバイスの使用シナリオです。デフォルトのクエリは最も狭いケースであり、徐々にデバイスの画面が広がっていると考えられます。

シンプルからシンプル、シンプルかつ複雑。 デスクトップの優先順位の場合、レイアウトの終わりはデスクトップコード、メディアのみ、モバイル端末コード、余分なデスクトップコードが読み込まれます。 画像ファイルの場合は、より無駄なリソースがダウンロードされます

インターフェイスの設計やコードの実行効率にかかわらず、モバイルの優先順位付けには明らかな利点があります。

3つの要素

レスポンシブなデザインには、弾性レイアウト、メディアクエリ、柔軟な画像の3つの要素が含まれます。

弾力性のあるレイアウトとメディアのクエリは、他のブログで詳しく紹介されています。

レスポンスピクチャとも呼ばれるエラスティックピクチャは、親コンテナの幅に応じて変化するピクチャを指します。幅は親コンテナによって制限され、ピクチャの元のサイズでは表現できません。

したがって、最も簡単な応答設定の画像設定は100%最大幅です。

img{  max-width: 100%;  }

1つの画像の場合は、上記のコードを使用してください。 HD画像が提供される場合、装置のサイズに応じて異なる画像をロードする必要があり、追加の処理が必要となる。 対処するにはいくつかの方法があります

1、絵の要素を使用して、IEブラウザ、アンドロイド4.4.4 – ブラウザは互換性がありません

<picture>  <source media="(min-width:50em)" srcset="img/l.jpg">  <source media="(min-width:30em)" srcset="img/m.jpg">  <img src="img/s.jpg" alt="#"></picture>

2、img要素のsrcsetとsizes属性、IEブラウザ、アンドロイド4.4.4-ブラウザと互換性がない

<img  src="img/480.png"  srcset="img/480.png 480w,img/800.png 800w, img/1600.png 1600w"  sizes="(min-width:800px) 800px,100vw"/>

3、jsを使用して、ウィンドウのresizeイベントに応じて、画像のパスを変更する

function makeImageResponsive(){    var width = $(window).width();    var img = $('.content img');    if(width <=480){        img.attr('src','img/480.png');    }else if(width <=800){        img.attr('src','img/800.png');    }else{        img.attr('src','img/1600.png');    }}$(window).on('resize load',makeImageResponsive);

4、バックエンドの構成は、現在のデバイスの機能のバックエンドにフロントエンドパス、これらの機能を介してバックエンドは、応答する方法を決定する。 しかし、ディレクトリの2つのバックエンドのリアクティブソリューションResponsive_ImagesとAdaptive-Imagesは、もはや維持されていません

利点と欠点

【メリット】

1、作業負荷を減らす、サイト、デザイン、コード、コンテンツのみ必要

2、時間を節約する

3、デバイスの表示の違いを解決するために

4、検索の最適化

5、より良いユーザーエクスペリエンス

短所

1、より多くのスタイルとスクリプトのリソースを読み込む必要があり、読み込み速度が影響を受けます

2、デザインは正確に配置し、制御することがより困難です

3、古いブラウザの互換性が良くない

応答モード

次に、4つの応答モード

【コラム落下シンク】

電話機の各大きなブロックは1行を占め、画面を伸ばすと同じ行に複数の列の列が形成されます

[主にフルイドベース流体タイプ]

基本的にColumn Dropと同じですが、少し「固定レイアウト」の機能があります:一定の幅に達すると、ボディコンテンツ部分はもはや広くなり、固定幅になりません

[レイアウトシフタ変換]

変換、すなわち、元のコンテンツの順序に従う必要はありません、あなたは最適なディスプレイのニーズに応じて一括注文を調整することができます

[キャンバスドローオフ]

画面の幅が十分でない場合は引き出しスタイルで、ボタンを非表示にしてから押し出します。 常に十分に広い画面に表示

以上は、中国の翻訳ツールで翻訳した中国の技術記事です

関連記事