適応Webページ
3533 ワード
適応Webデザインコードに必要な6つの調整
1、ページサイズの変更を許可または禁止
iOSとAndroidブラウザはwebkitコアに基づいており、この2つのブラウザと他の多くのブラウザはviewport meta要素がデフォルトのキャンバススケール設定を上書きすることをサポートしています.HTMLのラベルにラベルを挿入するだけで、ピクセル値などの具体的な幅やスケール2.0(デバイスの実際のサイズの2倍)を設定できます.次に、1つのページをデバイスの実際のサイズの2倍に表示するmetaラベルの例を示します.
ページサイズの変更が許可されていない場合は、user-scalable=yesをuser-scalable=noに変更します.たとえば、次のようにします.
2、ウェブページをパーセンテージレイアウトに変更する
アダプティブWebページは、レイアウト範囲を指定するために固定サイズを使用するのではなく、パーセントレイアウトを使用します.
ブラウズウィンドウがメディアクエリーの固定範囲外にある場合、Webページは水平にスクロールして完全にブラウズする必要がありますが、パーセンテージレイアウトでは、ページ要素がウィンドウサイズに応じて1つまたは複数のメディアクエリーの間でスタイルを柔軟に修正することができます.具体的には、css世代コードは特定のピクセル幅:width:xxx pxを指定するのではなく、パーセンテージ幅:width:xx%、または直接width:autoを指定します.
ここでは、固定画素幅を簡易な式に基づいて対応するパーセント幅に変換できます.ターゲット要素幅÷コンテキスト要素幅=パーセント幅です.
例:
wrapper {
header {
パーセントheaderブロックに変換されたcssは、次のようになります.
header {
3、pxをemで置き換える
同様に、ターゲット要素幅÷コンテキスト要素幅=パーセンテージ幅という式は、文字の画素単位を相対単位に変換するのにも適用されます.現代ブラウザのデフォルト文字は16画素なので、bodyラベルに次のいずれかのルールを適用すると効果が同じになります.
logo {
display: block; padding-top: 75px; color: #0d0c0c; font-family: Arial; font-size: 48px; }
変更されたスタイルは次のとおりです.
logo{
display: block; padding-top: 75px; color: #0d0c0c; font-family:Arial; font-size:3em/* 48 ÷ 16 */}
4、フローレイアウト(fluid grid)の使用
「フローレイアウト」とは、各ブロックの位置がフローティングであり、一定ではないことを意味します.
.main {float: right;width: 70%;} .leftBar {float: left;width: 25%;}
このような利点は、幅が小さすぎて2つの要素を置くことができず、後ろの要素が自動的に前の要素の下にスクロールし、水平方向にあふれず、水平スクロールバーの出現を回避し、ユーザーの読書体験を大幅に向上させることです.また、絶対位置決め(position:absolute)の使用にも十分注意してください.
5、Media Query技術の使用
適応設計の技術では、css 3はcss 2をサポートする.1定義メディアタイプは、max-width(最大幅)、device-width(デバイス幅、orientation(画面指向:横画面または縦画面)など、メディアタイプに関する機能属性を多く追加するため、Media Queryで対応するCSSファイルをロードすることができる.例えば、以下のコードは、ページがスクリーンを介して表示する、画面幅が480 pxを超えない場合にshetlandをロードすることを定義する.css
同じように複数のスタイルシートを作成して、異なるデバイスまたは異なる解像度の幅範囲に適応することができます.もちろん、より効果的な方法は、複数のMedia Queryを1つのスタイルシートファイルに統合することです.
@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {/* Styles */} @media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }
上記のコードで定義したスタイルクラスは、ブラウザの画面幅が600 pxを超える場合にのみ有効です.
したがって、min-widthとmax-widthを用いて画面サイズとブラウザの実際の幅を同時に判断することができ、Media Queryによって特定のデバイスに作用させたいが、その上で動作するブラウザが最大化サイズがデバイスの画面サイズと一致しないかどうかを無視すると、max-device-widthとmax-device-width属性を用いてデバイス自体の画面サイズを判断することができる.
Media Queryは唯一の解決策ではなく、Javascriptによって適応設計を実現することができます.特に、古いブラウザでCSS 3のMedia Queryを完璧にサポートできない場合は、代替案として使用できます.もちろん、古いブラウザ(IE 5+、Firefox 1+、Safari 2など)がCSS 3のMedia Queriesをサポートするのを専門のJavascriptライブラリで支援することができます.使用方法:css 3-mediaqueriesをダウンロードします.jsは、次のようにページで呼び出すことができます.
6、設計応答式画像
前年同期比で画像を拡大・縮小する技術は多く、その中には簡単で実行しやすいものも多く、CSSのmax-widthプロパティを使用するのが流行しています.
img { max-width: 100%;}
古いバージョンのIEはmax-widthをサポートしていないので、以下のように書くしかありません.
img { width: 100%; }
また、Windowsプラットフォームで画像をズームすると、画像の歪みが発生する可能性があります.この場合、IEの固有コマンドを使用してみてください.
img { -ms-interpolation-mode: bicubic; }
あるいは、Ethan MarcotteのimgSizer.js.
addLoadEvent(function() { var imgs = ocument.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
条件があれば、画面の大きさに応じて、解像度の異なる画像をロードすることが望ましい.
1、ページサイズの変更を許可または禁止
iOSとAndroidブラウザはwebkitコアに基づいており、この2つのブラウザと他の多くのブラウザはviewport meta要素がデフォルトのキャンバススケール設定を上書きすることをサポートしています.HTMLのラベルにラベルを挿入するだけで、ピクセル値などの具体的な幅やスケール2.0(デバイスの実際のサイズの2倍)を設定できます.次に、1つのページをデバイスの実際のサイズの2倍に表示するmetaラベルの例を示します.
ページサイズの変更が許可されていない場合は、user-scalable=yesをuser-scalable=noに変更します.たとえば、次のようにします.
2、ウェブページをパーセンテージレイアウトに変更する
アダプティブWebページは、レイアウト範囲を指定するために固定サイズを使用するのではなく、パーセントレイアウトを使用します.
ブラウズウィンドウがメディアクエリーの固定範囲外にある場合、Webページは水平にスクロールして完全にブラウズする必要がありますが、パーセンテージレイアウトでは、ページ要素がウィンドウサイズに応じて1つまたは複数のメディアクエリーの間でスタイルを柔軟に修正することができます.具体的には、css世代コードは特定のピクセル幅:width:xxx pxを指定するのではなく、パーセンテージ幅:width:xx%、または直接width:autoを指定します.
ここでは、固定画素幅を簡易な式に基づいて対応するパーセント幅に変換できます.ターゲット要素幅÷コンテキスト要素幅=パーセント幅です.
例:
wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
header {
margin-right: 10px;
margin-left:10px;
width: 940px;
パーセントheaderブロックに変換されたcssは、次のようになります.
header {
margin-right: 10px;
margin-left: 10px;
width: 97.916667% /* 940 ÷ 960 */
3、pxをemで置き換える
同様に、ターゲット要素幅÷コンテキスト要素幅=パーセンテージ幅という式は、文字の画素単位を相対単位に変換するのにも適用されます.現代ブラウザのデフォルト文字は16画素なので、bodyラベルに次のいずれかのルールを適用すると効果が同じになります.
font-size: 100%;
font-size:16px;
font-size: 1em;
logo {
display: block; padding-top: 75px; color: #0d0c0c; font-family: Arial; font-size: 48px; }
変更されたスタイルは次のとおりです.
logo{
display: block; padding-top: 75px; color: #0d0c0c; font-family:Arial; font-size:3em/* 48 ÷ 16 */}
4、フローレイアウト(fluid grid)の使用
「フローレイアウト」とは、各ブロックの位置がフローティングであり、一定ではないことを意味します.
.main {float: right;width: 70%;} .leftBar {float: left;width: 25%;}
このような利点は、幅が小さすぎて2つの要素を置くことができず、後ろの要素が自動的に前の要素の下にスクロールし、水平方向にあふれず、水平スクロールバーの出現を回避し、ユーザーの読書体験を大幅に向上させることです.また、絶対位置決め(position:absolute)の使用にも十分注意してください.
5、Media Query技術の使用
適応設計の技術では、css 3はcss 2をサポートする.1定義メディアタイプは、max-width(最大幅)、device-width(デバイス幅、orientation(画面指向:横画面または縦画面)など、メディアタイプに関する機能属性を多く追加するため、Media Queryで対応するCSSファイルをロードすることができる.例えば、以下のコードは、ページがスクリーンを介して表示する、画面幅が480 pxを超えない場合にshetlandをロードすることを定義する.css
同じように複数のスタイルシートを作成して、異なるデバイスまたは異なる解像度の幅範囲に適応することができます.もちろん、より効果的な方法は、複数のMedia Queryを1つのスタイルシートファイルに統合することです.
@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {/* Styles */} @media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }
上記のコードで定義したスタイルクラスは、ブラウザの画面幅が600 pxを超える場合にのみ有効です.
したがって、min-widthとmax-widthを用いて画面サイズとブラウザの実際の幅を同時に判断することができ、Media Queryによって特定のデバイスに作用させたいが、その上で動作するブラウザが最大化サイズがデバイスの画面サイズと一致しないかどうかを無視すると、max-device-widthとmax-device-width属性を用いてデバイス自体の画面サイズを判断することができる.
Media Queryは唯一の解決策ではなく、Javascriptによって適応設計を実現することができます.特に、古いブラウザでCSS 3のMedia Queryを完璧にサポートできない場合は、代替案として使用できます.もちろん、古いブラウザ(IE 5+、Firefox 1+、Safari 2など)がCSS 3のMedia Queriesをサポートするのを専門のJavascriptライブラリで支援することができます.使用方法:css 3-mediaqueriesをダウンロードします.jsは、次のようにページで呼び出すことができます.
6、設計応答式画像
前年同期比で画像を拡大・縮小する技術は多く、その中には簡単で実行しやすいものも多く、CSSのmax-widthプロパティを使用するのが流行しています.
img { max-width: 100%;}
古いバージョンのIEはmax-widthをサポートしていないので、以下のように書くしかありません.
img { width: 100%; }
また、Windowsプラットフォームで画像をズームすると、画像の歪みが発生する可能性があります.この場合、IEの固有コマンドを使用してみてください.
img { -ms-interpolation-mode: bicubic; }
あるいは、Ethan MarcotteのimgSizer.js.
addLoadEvent(function() { var imgs = ocument.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); });
条件があれば、画面の大きさに応じて、解像度の異なる画像をロードすることが望ましい.