***
5869 ワード
応答型レイアウトは実は技術の総合である.html 5,css 3,jqueryに詳しい場合は,応答レイアウトの学習は非常に簡単である.
応答レイアウトはcss 3の新しい特性を利用して、コンピュータの1024*768800*600、携帯電話の320*480などの画面解像度にページを適応させることにほかならない.
bootstrapのnavなどの複雑な機能を実装する場合は、jqueryを使用して関連する操作を実装する必要があります.私たちは応答型ウェブサイトを開発するとき、簡単に自分でスタイルを定義することができ、複雑でbootstrapを完全に使用することができます.
応答式レイアウトで使用するcssテクニックは主に:1.パーセント.要素のスタイルを設定するときは、固定された数値ではなくパーセンテージを使用します.特に画像のスケールでは、max-widthを設定する必要がある場合はパーセンテージを使用します.パーセンテージの計算式は次のとおりです.
ターゲット要素の幅/コンテキスト要素の幅=パーセント幅
固定幅
html
パーセントレイアウトに変更
2.emはpxを置き換えます.Em置換pxは主に文字スケールに適用される.計算式は
ターゲット要素サイズ/コンテキスト要素サイズ=パーセントサイズ
例えば次の要素pxを
ブラウザのデフォルトフォントは16 pxなので、次のように変更できます.
3.メディア照会.これも応答型クエリーのポイントであり、ページが異なるフォームサイズに適応できるのも、メディアクエリーのためです.メディアクエリは、異なるフォームの下で異なるスタイルを定義することを理解するのが簡単です.例:
参照スタイルが必要な場合は、ページに追加できます.
4.レスポンスレイアウトの互換性.携帯電話のブラウザはすべて応答式のレイアウトに対応して、コンピュータのブラウザの中で最新のブラウザはサポートします.ie 8以下のブラウザはサポートされておらず、アップグレードも面倒です.ネット上ではie 8ブラウザと互換性のあるテクニックもありますが、テストしてみました.ie 8の下では妥協がサポートされています.妥協というのは、効果もサポートされていないためです.ie 6、ie 7は基本的にサポートされていません.特に私を怒らせたのは、ie 8が妥協して支持され、chromeの中でいくつかの効果が変形したと感じたことだ.まあ、ie 8ブラウザはやめましょう.結局、携帯電話ユーザーのために開発されています.
応答式レイアウトの開発は基本的に以上の4点であり,html 5を加えた.html 5はページレイアウトを行います.特効が必要な場合は、jQueryを使用します.
応答レイアウトはcss 3の新しい特性を利用して、コンピュータの1024*768800*600、携帯電話の320*480などの画面解像度にページを適応させることにほかならない.
bootstrapのnavなどの複雑な機能を実装する場合は、jqueryを使用して関連する操作を実装する必要があります.私たちは応答型ウェブサイトを開発するとき、簡単に自分でスタイルを定義することができ、複雑でbootstrapを完全に使用することができます.
応答式レイアウトで使用するcssテクニックは主に:1.パーセント.要素のスタイルを設定するときは、固定された数値ではなくパーセンテージを使用します.特に画像のスケールでは、max-widthを設定する必要がある場合はパーセンテージを使用します.パーセンテージの計算式は次のとおりです.
ターゲット要素の幅/コンテキスト要素の幅=パーセント幅
固定幅
#wrap {
width:960px;
}
#header{
width:940px;
margin-left:10px;
margin-right:10px;
}
img{
max-width:100%;
}html
<div class="wrap">
<div class="header"></div>
</div>パーセントレイアウトに変更
#wrap {
width:96%;
}
#header{
margin-left:1.041666666% /* 10/960 */
margin-right:1.041666666% /* 10/960 */
width:97.9166667%; /*940/960*/
}2.emはpxを置き換えます.Em置換pxは主に文字スケールに適用される.計算式は
ターゲット要素サイズ/コンテキスト要素サイズ=パーセントサイズ
例えば次の要素pxを
#wrap{
font-size:16px;
}
#content h1{
font-size:69px;
}ブラウザのデフォルトフォントは16 pxなので、次のように変更できます.
#wrap{
font-size:100%;
}
#content h1{
font-size:4.3125em; /* 69 / 16 */
}3.メディア照会.これも応答型クエリーのポイントであり、ページが異なるフォームサイズに適応できるのも、メディアクエリーのためです.メディアクエリは、異なるフォームの下で異なるスタイルを定義することを理解するのが簡単です.例:
/* 960 */
@media screen and (max-width:960px){
body{
background-color:red;
}
h1{
font-size:14px;
}
}
/* 768 */
@media screen and (max-width:768px){
body{
background-color:orange;
}
h1{
font-size:12px;
}
}
/* 320 */
@media screen and (max-width:320px){
body{
background-color:green;
}
h1{
font-size:10px;
}
}参照スタイルが必要な場合は、ページに追加できます.
<link rel="stylesheet" type="test/css" media="screen" href=" " />4.レスポンスレイアウトの互換性.携帯電話のブラウザはすべて応答式のレイアウトに対応して、コンピュータのブラウザの中で最新のブラウザはサポートします.ie 8以下のブラウザはサポートされておらず、アップグレードも面倒です.ネット上ではie 8ブラウザと互換性のあるテクニックもありますが、テストしてみました.ie 8の下では妥協がサポートされています.妥協というのは、効果もサポートされていないためです.ie 6、ie 7は基本的にサポートされていません.特に私を怒らせたのは、ie 8が妥協して支持され、chromeの中でいくつかの効果が変形したと感じたことだ.まあ、ie 8ブラウザはやめましょう.結局、携帯電話ユーザーのために開発されています.
応答式レイアウトの開発は基本的に以上の4点であり,html 5を加えた.html 5はページレイアウトを行います.特効が必要な場合は、jQueryを使用します.