---- HTML5応答（適応）Webデザイン
今、多くのプロジェクトは、応答性であるかの適応は、携帯電話、コンピュータや他の機器の私たちのさまざまな画面サイズに対応するために行われる必要があるので、私たちはここで私が応答（適応）を行うだろうかで、ページ上のハードワークする必要がありますWebデザイン
1、先頭ページのコード、ラインビューポートのメタタグを追加
<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0、最小スケール= 1.0、ユーザースケーラブル= NO」>
、ページの<head>のより多くの単語を増やしページの幅を自動的に携帯電話の画面の幅に適応させ、次には、これらの属性の説明は次のとおりです。
1）幅=デバイス幅：幅は、スクリーン装置の幅を表します
2）最初のスケール= 1.0：初期スケーリングを表し、1.0ページは100％です
3）最小スケール= 1.0：最小スケーリングを表します
4）最大規模= 1.0：最大規模を表します
5）ユーザスケーラブル=いいえ：ユーザがズームを調整することができるかどうかを示していません
あなたは互換性があるようにしたい場合は、IE6 / 7月8日、それはで必要であるCSS3、mediaqueries.js
|
1
2
3
|
<!--[
if
lt IE 9]>
<script src=
"http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"
></script>
<![endif]-->
|
2、絶対幅を使用していません
幅：自動; /幅：XXの％。
図3に示すように、デフォルトのフォントサイズは、100％のページのサイズであることが16個の画素であり、「REM」の相対的なサイズを使用するように、「PX」の絶対的なサイズを使用しません
|
1
2
|
html{
font-size
:
62.5%
;}
body {
font
:
normal
100%
Arial
,
sans-serif
;
font-size
:
14px
;
font-size
:
1.4
rem; }
|
もちろん、スタイルはメディアクエリ、などで良くなります
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
html{
font-size
:
10px
}
10px
==
62.5%
@media
screen
and (
min-width
:
321px
) and (
max-width
:
375px
){html{
font-size
:
11px
}}
@media
screen
and (
min-width
:
376px
) and (
max-width
:
414px
){html{
font-size
:
12px
}}
@media
screen
and (
min-width
:
415px
) and (
max-width
:
639px
){html{
font-size
:
15px
}}
@media
screen
and (
min-width
:
640px
) and (
max-width
:
719px
){html{
font-size
:
20px
}}
@media
screen
and (
min-width
:
720px
) and (
max-width
:
749px
){html{
font-size
:
22.5px
}}
@media
screen
and (
min-width
:
750px
) and (
max-width
:
799px
){html{
font-size
:
23.5px
}}
@media
screen
and (
min-width
:
800px
){html{
font-size
:
25px
}}
|
しかし、好ましくは、最小幅、最大幅を有する、PC側であれば、好ましくは、MIN-デバイス幅および最大デバイス幅と移動終了時に
図4に示すように、流れのレイアウトは、「フロー分布」は、ブロックのそれぞれの位置は固定されず、フローティングされることを意味します
|
1
2
|
.
left
{
width
:
30%
;
float
:
left
}
.
right
{
width
:
70%
;
float
:
right
;}
|
したがって、左右の幅は、2つの要素に合わせて、小さすぎる場合、後者の要素が自動的に水平方向オーバーフローしません（オーバーフロー）に、前部要素の下にスクロールされ、利益をフローティングフローティングと、水平方向のスクロールを避けるために外観
5、CSSをロードすることを選択します
コア「RWD」は、CSS3メディアクエリモジュールの導入です。自動スクリーンの幅を検出し、適切なCSSファイルをロード
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
|
このコードの意味は：画面の幅未満600個のピクセルである場合（MAX-デバイス幅：600PX）、ファイルcss600.cssをロードします。
980ピクセルにピクセル600の間の画面の幅は、ファイルがロードさcss600-980.cssある場合
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
|
（推奨されません）がありますHTMLタグとCSSファイルをロードするだけでなく、既存のCSSファイルをロードすることができます
|
1
|
@import
url
(
"css600.css"
)
screen
and (max-device-
width
:
600px
);
|
6、のCSSの@mediaルール（記述する必要がある場合）
|
1
|
@media
screen
and (max-device-
width
:
400px
) { .
left
{
float
:
none
;} }
|
画面幅が400ピクセル未満である場合、キャンセルフローティング
7、画像適応は、「RWD」も自動画像スケーリングを実装する必要があります。
|
1
|
img {
width
:
100%
;}
|
Windowsプラットフォームは、画像をスケーリングするとき、画像の歪みを見ることができます。この場合は、独自のコマンドIEを使用してみてください
|
1
|
img {
width
:
100%
; -ms-interpolation-mode: bicubic;}
|
imgSizer.js - またはJSを使用
|
1
2
3
4
|
addLoadEvent(function() {
var imgs = document.getElementById(
"content"
).getElementsByTagName(
"img"
);
imgSizer.collate(imgs);
});
|
さて、このページは、適応、それを書きます！
今、多くのプロジェクトは、応答性であるかの適応は、携帯電話、コンピュータや他の機器の私たちのさまざまな画面サイズに対応するために行われる必要があるので、私たちはここで私が応答（適応）を行うだろうかで、ページ上のハードワークする必要がありますWebデザイン
1、先頭ページのコード、ラインビューポートのメタタグを追加
<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0、最小スケール= 1.0、ユーザースケーラブル= NO」>
、ページの<head>のより多くの単語を増やしページの幅を自動的に携帯電話の画面の幅に適応させ、次には、これらの属性の説明は次のとおりです。
1）幅=デバイス幅：幅は、スクリーン装置の幅を表します
2）最初のスケール= 1.0：初期スケーリングを表し、1.0ページは100％です
3）最小スケール= 1.0：最小スケーリングを表します
4）最大規模= 1.0：最大規模を表します
5）ユーザスケーラブル=いいえ：ユーザがズームを調整することができるかどうかを示していません
あなたは互換性があるようにしたい場合は、IE6 / 7月8日、それはで必要であるCSS3、mediaqueries.js
|
1
2
3
|
<!--[
if
lt IE 9]>
<script src=
"http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"
></script>
<![endif]-->
|
2、絶対幅を使用していません
幅：自動; /幅：XXの％。
図3に示すように、デフォルトのフォントサイズは、100％のページのサイズであることが16個の画素であり、「REM」の相対的なサイズを使用するように、「PX」の絶対的なサイズを使用しません
|
1
2
|
html{
font-size
:
62.5%
;}
body {
font
:
normal
100%
Arial
,
sans-serif
;
font-size
:
14px
;
font-size
:
1.4
rem; }
|
もちろん、スタイルはメディアクエリ、などで良くなります
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
html{
font-size
:
10px
}
10px
==
62.5%
@media
screen
and (
min-width
:
321px
) and (
max-width
:
375px
){html{
font-size
:
11px
}}
@media
screen
and (
min-width
:
376px
) and (
max-width
:
414px
){html{
font-size
:
12px
}}
@media
screen
and (
min-width
:
415px
) and (
max-width
:
639px
){html{
font-size
:
15px
}}
@media
screen
and (
min-width
:
640px
) and (
max-width
:
719px
){html{
font-size
:
20px
}}
@media
screen
and (
min-width
:
720px
) and (
max-width
:
749px
){html{
font-size
:
22.5px
}}
@media
screen
and (
min-width
:
750px
) and (
max-width
:
799px
){html{
font-size
:
23.5px
}}
@media
screen
and (
min-width
:
800px
){html{
font-size
:
25px
}}
|
しかし、好ましくは、最小幅、最大幅を有する、PC側であれば、好ましくは、MIN-デバイス幅および最大デバイス幅と移動終了時に
図4に示すように、流れのレイアウトは、「フロー分布」は、ブロックのそれぞれの位置は固定されず、フローティングされることを意味します
|
1
2
|
.
left
{
width
:
30%
;
float
:
left
}
.
right
{
width
:
70%
;
float
:
right
;}
|
したがって、左右の幅は、2つの要素に合わせて、小さすぎる場合、後者の要素が自動的に水平方向オーバーフローしません（オーバーフロー）に、前部要素の下にスクロールされ、利益をフローティングフローティングと、水平方向のスクロールを避けるために外観
5、CSSをロードすることを選択します
コア「RWD」は、CSS3メディアクエリモジュールの導入です。自動スクリーンの幅を検出し、適切なCSSファイルをロード
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
|
このコードの意味は：画面の幅未満600個のピクセルである場合（MAX-デバイス幅：600PX）、ファイルcss600.cssをロードします。
980ピクセルにピクセル600の間の画面の幅は、ファイルがロードさcss600-980.cssある場合
|
1
|
<
link
rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
|
还有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载
|
1
|
@import
url
(
"css600.css"
)
screen
and (max-device-
width
:
600px
);
|
6、CSS的@media规则（如果有需要就写）
|
1
|
@media
screen
and (max-device-
width
:
400px
) { .
left
{
float
:
none
;} }
|
当屏幕宽度小于400px的时候，就取消浮动
7、图片自适应，"自适应网页设计"还必须实现图片的自动缩放。
|
1
|
img {
width
:
100%
;}
|
windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令
|
1
|
img {
width
:
100%
; -ms-interpolation-mode: bicubic;}
|
或使用js--imgSizer.js
|
1
2
3
4
|
addLoadEvent(function() {
var imgs = document.getElementById(
"content"
).getElementsByTagName(
"img"
);
imgSizer.collate(imgs);
});
|
好，这样写出的网页就会自适应啦！