Web アダプティブ デザインに必要な調整_html/css_WEB-ITnose

1、 允许或禁止调整页面大小

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

如果不允许调整页面大小，那么把user-scalable=yes改为user-scalable=no，如：

2、将网页修改为百分比布局

自适应网页是绝对不可以使用固定尺寸来指定布局范围的，而是用百分比布局。

当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是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;

}

パーセンテージに変換されたヘッダー ブロックの 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;

たとえば、Web サイトのタイトルの対応するスタイル:

#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. 流体グリッドの使用

「流体レイアウト」とは、各ブロックの位置が固定されていないことを意味します。

.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}

これの利点は、幅が小さすぎる場合に、 put 要素が 2 つ以上ある場合、次の要素は自動的に前の要素の一番下までスクロールし、水平方向にオーバーフローすることはありません。これにより、水平スクロール バーの表示が回避され、ユーザーの読書エクスペリエンスが大幅に向上します。さらに、絶対位置指定 (position:absolute) を使用する場合は十分に注意する必要があります。

5. メディア クエリ テクノロジの使用

アダプティブ デザイン テクノロジでは、css3 は css2.1 で定義されたメディア タイプをサポートし、max -width などのメディア タイプに関連する多くの機能属性も追加します。 (最大幅)、デバイス幅 (デバイスの幅、向き (画面の向き: 横向きまたは縦向き)) なので、対応する CSS ファイルをメディア クエリを通じて読み込むことができます。たとえば、次のコードは、ページが画面を通してレンダリングされるかどうかを定義します。画面の幅が 480px を超えない場合は、shetland.css

もちろん、複数のスタイル シートを作成して、さまざまなデバイスやさまざまな解像度の幅範囲に適応させることもできます。もちろん、より効果的なアプローチは、複数のメディア クエリを統合することです。 1 つのスタイル シート ファイル:

@media のみの画面と (min-device-width: 320px) および (max-device-width: 480px) {

/* スタイル*/

}

@media screen and (min-width: 600px) {

.hereIsMyClass {

width: 30%;

float: right;

}

}

上記のコードで定義されたスタイル クラスは、ブラウザーの画面幅が 600px を超える場合にのみ有効です

<.> したがって、Media Query を通じて特定のデバイス上で動作するが、その上で実行されているブラウザを無視する場合、min-width と max-width を使用すると、ブラウザの画面サイズと実際の幅の両方を決定で​​きます。サイズを最大化していないため、デバイスの画面サイズと一致しない場合は、max-device-width 属性と max-device-width 属性を使用してデバイス自体の画面サイズを決定できます。これは唯一の解決策ではありません。特に、一部の古いブラウザが CSS3 のメディア クエリを完全にサポートできない場合は、Javascript の設計を通じて適応させることもできます。もちろん、古いブラウザ (IE5 以降、Firefox 1 以降、Safari 2 など) が CSS3 メディア クエリをサポートできるよう、専門的な Javascript ライブラリを引き続き使用できます。 使用方法: css3-mediaqueries.js をダウンロードし、ページ上で呼び出します。 . 例:

6. レスポンシブ画像をデザインする

画像を年々拡大縮小する手法は数多くありますが、その多くはシンプルで実装が簡単です。より一般的な方法は、CSS の max-width 属性を使用することです:

img { max-width : 100%;}

IE の古いバージョンは max-width をサポートしていないため、次のように記述する必要があります。 Windows プラットフォームで画像を拡大縮小すると、画像の歪みが発生する場合があります。現時点では、IE 独自のコマンド

img { -ms-interpolation-mode: bicubic; }

または Ethan Marcotte の imgSizer.js を使用してみてください。

addLoadEvent(function() {

var imgs =

ocument.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collat​​e(imgs);

});

可能であれば、さまざまな画面サイズに応じてさまざまな解像度の画像を読み込むことが最善です。