アダプティブはすべての端末に適応するテンプレートのセットですが、各デバイスで表示されるレイアウトは同じであり、一般に幅アダプティブとして知られています。
一連のレスポンシブ テンプレートはすべての端末に適応しますが、各デバイスで表示されるレイアウトは異なる場合があります。
レスポンシブ/アダプティブ Web デザインは、さまざまなデバイスとの互換性の負担が大きい、コードが煩雑である、読み込み時間が長いなどの欠点がありますが、クロスプラットフォームおよびターミナルであり、一度設計でき、汎用的に適用でき、状況に応じて適応させることができます。画面解像度、画像の自動ズーム、レイアウトの自動調整は、技術的な実装であるだけでなく、デザインに関する新しい考え方でもあります。
多くの Web サイトの解決策は、専用のモバイル バージョンや iPhone/iPad バージョンを提供するなど、デバイスごとに異なる Web ページを提供することです。これにより確実な効果は得られますが、さらに面倒であり、同時に複数のバージョンを維持する必要があります。さらに、Web サイトに複数のポータルがある場合、アーキテクチャ設計が大幅に複雑になります。
画面が小さすぎると、Web ページを画面サイズに適応させることができても、小さな画面で表示するとコンテンツがぎっしりと感じられてしまうという問題が生じます。これを解決するために生まれたのがレスポンシブネスです。問題。画面の幅を自動的に認識し、それに応じて Web デザインを調整し、表示されるコンテンツが変更される場合があります。
アダプティブ エクスペリエンス http://m.ctrip.com/html5/ レスポンシブ エクスペリエンス http://segmentfault.com/
CSSシークレットガーデン http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. 応答性の基礎知識1.メタタグを設定する<meta name=viewport content=width=デバイス幅、initial-scale=1.0、maximum-scale=1.0、user-scalable=no>
このコードのいくつかのパラメータについて説明します。
§width = device-width: 幅は現在のデバイスの幅と同じです。
§initial-scale: 初期スケーリング (デフォルト設定は 1.0)
§minimum-scale: ユーザーがズームできる最小スケール (デフォルトは 1.0)
§maximum-scale: ユーザーがズームできる最大スケール (デフォルトは 1.0 に設定)
§user-scalable: ユーザーが手動でズームできるかどうか (ユーザーにページをズームインおよびズームアウトさせたくないため、デフォルトは no)
2. メディアクエリ CSS3 メディアクエリはレスポンシブデザインを実現するための重要な要素です。メディア クエリ機能を使用すると、デバイスの幅に基づいてページで異なる CSS ブロックを使用することができます。
次の CSS ルールは、画面幅が 980 以下の場合に有効になります。
@media (orientation:portrait) および (max-width:460px) { .video .innerBox .news a.more { 表示: なし; } .video .innerBox .news スパン { 表示: なし } .video .innerBox .news { 幅: 100% } .video .innerBox .news ul { 幅: 100%; }}方向: 縦 |
ポートレート：
指定された出力デバイスのページの表示領域の高さが幅以上であることを指定します
風景：
ポートレート値を除いて、すべて風景です
画面幅が 400 ピクセルから 600 ピクセルの間の場合は、[CSS の読み込み] を選択して smallScreen.css ファイルを読み込みます。
<link rel=stylesheet type=text/cssmedia=screen および (min-width: 400px) および (max-device-width: 600px) href=smallScreen.css />
3. パーセントレイアウト
3. レスポンシブページデザイン、フォント、画像処理1. html5/css3レスポンシブページのデザインプロセス
ステップ 1: モバイル デバイス (携帯電話、タブレット) や PC など、互換性が必要なデバイスの種類と画面サイズを決定します。モバイルデバイスの場合は、設計および実装時にジェスチャー機能の追加に注意してください。
画面サイズ: さまざまな携帯電話の画面サイズ (水平および垂直を含む)、さまざまなタブレット サイズ (水平および垂直を含む)、通常のコンピュータ画面およびワイドスクリーンが含まれます。
ステップ 2: 決定したサイズに対して異なるワイヤーフレームのプロトタイプを作成する さまざまなサイズでページのレイアウトがどのように変化するか、コンテンツのサイズを拡大縮小する方法、機能やコンテンツの削除、さらには特殊な環境での動作方法などを検討する必要があります。特化したデザインなどこのプロセスでは、デザイナーとフロントエンド開発者間の緊密なコミュニケーションが必要です。
ステップ 3: ビジュアル デザイン。簡単なテストのために画像を対応するデバイスにインポートします。これは、アクセシビリティや読みやすさなどの問題をできるだけ早く発見するのに役立ちます。
従来の Web 開発と比較して、レスポンシブ デザイン ページではページ レイアウトやコンテンツ サイズが変更されるため、最終出力がデザイン ドラフトと大きく異なる可能性が高く、フロントエンド開発者とデザイナーの間でより多くのコミュニケーションが必要になります。
2. レスポンシブフォント
CSS 内の複数の異なるユニット間の比較
px: ピクセル。相対的な長さの単位であり、サイズは画面の解像度によって決まります。 （報道各社からの取材にご協力いただきます）
em: 相対的な長さの単位。現在のオブジェクト内のテキストのフォント サイズに相当します。インライン テキストの現在のフォント サイズが設定されていない場合は、ブラウザのデフォルトのフォント サイズに相対します。 em の値は固定されておらず、親要素のフォント サイズを継承します。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。
rem: CSS3 の新しい相対単位。 em との主な違いは、rem を使用して要素のフォント サイズを設定する場合、相対サイズであることに変わりはありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。
%: さらに、パーセントを使用してサイズを指定することもできます。これは、ブラウザのデフォルトのフォント サイズに対する現在のフォントの倍数を表します。このユニットは、ページレスポンシブデザインでもよく使用されます。
html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */}p{font-size :14px;フォントサイズ:1.4rem;}rem をサポートしていないブラウザと互換性を持たせるためには、対応する px 値を rem の前に書き込む必要があることに注意してください。これにより、rem をサポートしていないブラウザが正常にダウングレードできるようになります。実際、デフォルトの font-size: 100% を使用するか、font-size: 62.5% に設定するかについては、CSS 前処理ツールを導入すれば、自然にデフォルト値を使用することができます。他の理由で font-size: 62.5% を使用する場合は、何も問題はありません。本文で必要なデフォルトの font-size にリセットできます。
3. レスポンシブな画像およびビデオ処理
http://alistapart.com/d/sensitive-web-design/ex/ex-site-flexible.html#
1. 背景画像 ---- メディアクエリ
2. 液状化画像 ---- 弾性画像
img、オブジェクト { max-width: 100%;}https://www.filamentgroup.com/examples/sensitive-images/3.HTML5の<picture>要素
HTML5 の <picture> 要素では複数の画像を設定できます。
ブラウザのサポート
<picture> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="マージン: 0px; パディング: 0px; アウトライン: なし; 行の高さ: 25.2px;フォントサイズ: 14px; 幅: 660px; オーバーフロー: 非表示; フォントファミリー: tahoma、arial、Microsoft YaHei;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. noscript タグを使用してレスポンシブ画像を作成する
JS による大小の画像の動的読み込み
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=あなたの代替テキスト class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var sensitiveImageTag = { replaceInitialImages:function(respons) { var platform = デスクトップ; resImage = '.'+respons; var ownedImages = $(resImage); //現在のディスプレイデバイスの幅をテスト if(screen.width <= 767){ //767px、iPadより小さい全員がモバイルであると考えています platform = mobile } // 画像の初期ソース要素を設定します for(i = 0; i < noOfsensitiveImages; i = i + 1 ){ var noScriptElem = $(応答画像[i]); img.alt = noScriptElem.attr(data-alttext); = モバイル){ img.src = noScriptElem.attr(data-mobilesrc); }else{ img.src = noScriptElem.attr(data-fullsrc); } img.className = 応答; $('.img-placeholder').eq(i).html('').append(img); ); } }};ResponseImageTag.replaceInitialImages('responsivize');$(window).resize(function(){ ResponseImageTag.replaceInitialImages('responsivize');});</script>4. レスポンシブフレームワークカスタマイズ: Web サイトに多数の多様なデザインがある場合、それでもブートストラップを使用したい場合は、最下層としてフレームワークを変更する必要があります。多数のスタイルをコピーする必要があり、CSS 階層が混乱しており、維持するのが難しい。
状況によっては、ブートストラップが非常に役立ちます。たとえば、比較的美しい個人 Web サイト、企業 Web サイト、ブログのバックエンド管理インターフェイス、およびページの高度なカスタマイズを必要としないその他のプロジェクトを迅速に構築したい場合は、ほとんどのバックエンド システム ブラウザーが優れた互換性を備えていることが多いです。譲歩スタイルであり、詳細を掘り下げるのは簡単ではありません。あるいは、ブラウザの互換性と無数のデバイス サイズを考慮すると、Web サイトのフロントエンドの構築に経験が浅い人もいるかもしれません。Bootstrap が多くの問題を解決してくれるでしょう。