ホームページ > 記事 > ウェブフロントエンド > レスポンシブ Web デザインの予備調査_html/css_WEB-ITnose
レスポンシブ Web デザインの予備調査_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:47:231010ブラウズ
会社の本棚には「レスポンシブ Web デザイン: HTML5 と CSS3 の実践」という本があり、おそらく最初の数章を注意深く読みました。その後のほとんどの章で CSS3 が紹介されています (このマニュアルは必要に応じていつでも見つけることができます)。 )
「レスポンシブ Web デザイン: HTML5 と CSS3 の実践」スタイル Web デザイン: HTML5 と CSS3 の実践》
モバイルファーストのクロスターミナル Web 天猫フロントエンド @Xu Kai-Guidao W3CTECH 2013 http: //luics.com/demo/cew-w3ctech-1311/#/
レスポンシブ レイアウトのデザイン コンセプト
レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案されたコンセプトです。つまり、Web サイトが複数の Web サイトと互換性があることを意味します。端末ごとに特定のバージョンを作成するのではなく、端末を作成します。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。応答レイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供することができ、大画面モバイル デバイスの人気に伴い、一般的な傾向を使用することは過言ではありません。このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、確立されたパターンもいくつか見られます。コード面倒なのは、役に立たない要素があり、負荷時間は延長されます。 、font rem ルート要素に応じてズームインし、CSS スプライト ボタンなどを避けます。それ以外の場合は、画像ズームを使用してセットアップします。簡単に言うと、一般的に 480、768、1024 の 3 つの解像度と互換性があります。現在、1280、1960、およびその他のレベルも考慮する必要があります (4K などはまだ処理するメディアが必要です)
を選択します。
media ie8-6 はサポートしていません。response コマンドを使用してサポートを得ることができますが、その必要はありません (ie8 より下では、デフォルトの CSS を使用してください。互換性が必要な場合は、あまり親切にしないでください) Respond.js の使用を検討してください
コンテンツファースト
は応答性の 2 番目のアイデアです。メイン コンテンツが最初に表示され、対応する二次モジュールは後で変更され、入力されます例については、私のブログを参照してください。改訂後に説明します)!
1200-1920 (固定 1200) (メインデスクトップレベルはまだ 4K デバイス向けに考慮されていません)
1200-1024 (固定 1000) (古い PC およびタブレット) (ie6-8 は応答性をサポートしておらず、デフォルトでこの幅になっていますが、個人的には古すぎるものは扱いたくないです)
768 (768-1000) (width 99%) (実際にはそうではありませんフルスクリーンは好きではありません）
上記は互換性があるだけで、何も言うことはありません ゲストオフィサーは少し遅いです 480-768 に対応しています。モバイルデバイスの場合、テーマの内容が優先されるため、記事リストの下に日付のお知らせを配置しました (実際のアイデアは非常に単純です)
レスポンシブレイアウト
幅に応じて色を変更します
.content{
境界線: 1px 実線 # 123;
color: orange;
border: 1px solid orange;
width:95%;
}
}
@media screen and (max-width: 768px){
.content{
color: red;
border: 1px solid red;
width:98%;
}
}
@media screen and (max-width: 480px){
.content{
color: green;
border: 1px solid green;
width: 95%;
}
}
メディアクエリで検出できる機能は何ですか
width: ビューポートの幅。高さ: ビューポートの高さ。
? device-width: レンダリング サーフェイスの幅 (私たちにとって、それはデバイス画面の幅です)。
? device-height: レンダリング サーフェスの高さ (私たちにとって、それはデバイスの画面の高さです)。
? 向き: デバイスが横向きか縦向きかを確認します。
? アスペクト比: ビューポートの幅と高さに基づくアスペクト比。 16:9 比率の表示画面は、アスペクト比: 16/9 として定義できます。
? device-aspect-ratio: アスペクト比と同様、デバイス レンダリング プレーンの幅と高さのアスペクト比に基づきます。
? 色: 各色の桁数。たとえば、min-color: 16 は、デバイスが 16 ビット カラーを備えているかどうかを検出します。
? color-index: デバイスのカラー インデックス テーブル内の色の数。値は負ではない整数である必要があります。
?monochrome: モノクロ フレームバッファ内のピクセルごとに使用されるビット数を検出します。値は、モノクロ: 2 など、負ではない整数である必要があります。
? 解像度: 最小解像度: 300dpi など、画面またはプリンターの解像度を検出するために使用されます。最小解像度: 118dpcm など、1 センチメートルあたりのピクセルの測定値も受け入れられます。
? scan: テレビのスキャン方式。値はプログレッシブ (プログレッシブ スキャン) またはインターレース (インターレース スキャン) に設定できます。たとえば、720p HD TV (720p の p はプログレッシブ スキャンを示します) は scan: Progressive に一致し、1080i HD TV (1080i の i はインターレース スキャンを示します) は scan: interlace に一致します。
? グリッド: 出力デバイスがグリッド デバイスであるかビットマップ デバイスであるかを検出するために使用されます。スキャンとグリッドを除く上記のすべての機能では、最小プレフィックスと最大プレフィックスを使用してクエリ範囲を作成できます。たとえば、以下に示すコード スニペットを分析します。
? @import url("phone.css") screen and (min-width:200px) and (max-width:360px); ここでは、min と max が幅に適用されます。クエリのスコープを設定します。この方法では、phone.css ファイルには、ビューポート幅が 200 ピクセルから 360 ピクセルまでのディスプレイ デバイスのみが含まれます。
上記によると、最初に一部のローエンド ブラウザ (おそらく 1024 レベルのユーザー) が読み取るためのメディアフリー CSS を作成し、次にメディアを使用して他の解像度を上書きしたり書き換えたりすることができます
ズーム
挿入
ビューポートビジュアル
初期スケールの初期化係数 2.0 が拡大係数です
width screen 幅
initial-scale 初期スケーリング。つまり、ページの初期ズーム レベルです。これは、ページ サイズの乗数である浮動小数点値です。たとえば、初期スケーリングを「1.0」に設定すると、Web ページは表示時にターゲット密度解像度の 1:1 で表示されます。 「2.0」に設定すると、ページが2倍に拡大されます。
maximum-scale 最大ズーム。つまり、許可されるスケーリングの最大度です。これは、画面サイズと比較したページ サイズの最大乗数を示す浮動小数点値でもあります。たとえば、この値を「2.0」に設定すると、ページを目標サイズと比較して最大 2 倍に拡大できます。
ユーザースケーラブル ユーザーが調整可能なスケーリング。つまり、ユーザーがページのズーム レベルを変更できるかどうかです。 「yes」に設定すると、ユーザーは変更を許可されます。それ以外の場合は「no」です。デフォルト値は「はい」です。これを no に設定すると、スケーリングはまったく不可能になるため、minimum-scale と minimum-scale の両方が無視されます。
最小スケールの最小ズーム倍率もあります
モバイルデバイスの一部のメタ
Webアプリケーションは以下で実行されます全画面モード content ="yes|no" デフォルト no
Web アプリケーション ステータス バー(画面バーの上部) style
content ="default|blank|black-transparent|blank-translucent "
default: デフォルト表示blank: black black-transparent: 黒透明blank-translucent: 黒半透明
ページ内の電話番号を識別できます。 content="telephone=yes|no"
リンクの強調表示を無効にする (主に IE と Safari でハイパーリンクがタッチされたときに強調表示されます)
レスポンシブ デザインに流体レイアウトを適用する
流体レイアウトの覚えておくべき公式: ターゲット幅 (ピクセル単位)/コンテキスト幅 (ピクセル単位) = パーセンテージ簡単に言えば、レイアウトはターゲット要素の幅/親要素の幅のパーセンテージを取得します。対応するフォントは、メイン フォントのパーセンテージ計算方法である公式を適用することもできます (ピクセルはデザイン図面のピクセルです)。
ボディの最も外側のパーセンテージ、このカテゴリの 90% -100% は、レイアウトの幅を計算するために父親の要素に基づいて計算されます。 div> 複数のスケーリング
によると
にも適用されます。幅
により、優れたユーザーエクスペリエンスを実現しますサーバーは、ロードする適応的な画像選択も提供します)対応する画像 画像ストレージ アドレスのアセット bkg フォルダーの画像は縮小されませんが、特定のフォルダー内の画像は拡大縮小されます
グリッド システム
すぐに構築できるグリッド システムが多数あります。レスポンシブ フレームワークを比較するには、これらを使用します
レスポンシブ ビデオ
iframe ビデオの場合、対応する読み込みフレームワークを適応させる必要があります。 , 応答性とは、1 つのページでより多くのデバイスをサポートすることであり、SEO に有利ですが、デスクトップ デバイスが追求する効果はモバイル デバイスと同じではなく、大きな違いがあり、応答性の欠点はここにある可能性があります。 タオバオ、テンセント、バイドゥのホームページはすべて専用のモバイル ページ パッド ページを持っていますが (結局のところ、効果とパフォーマンスが向上します)、アクティビティ ページのゲーム ページは他の端末用のページを作成しません。この目的のために、直接、主に応答します。 淘宝網テンセント百度ホームページをテストするために、対応する 2k 4k 画面を試すことができることを追加することもできます
「穴」はまだゆっくりと埋める必要があることがわかりましたお願いします。転載用にソースを保存してください アドレス、ありがとうございます