html 5応答レイアウトの例
レスポンスレイアウト
応答レイアウトは、Ethan Marcotteが2010年5月に提案した概念であり、簡単に言えば、1つのサイトが複数の端末と互換性を持つことができる--各端末のために特定のバージョンを作るのではなく.この概念はモバイルインターネット閲覧を解決するために誕生した.
応答型レイアウトは、異なる端末のユーザーにより快適なインタフェースとより良いユーザー体験を提供することができ、現在の大画面モバイルデバイスの普及に伴い、「大勢の赴くところ」と形容しても過言ではない.ますます多くのデザイナーがこの技術を採用するにつれて、私たちは多くの革新を見ただけでなく、いくつかの成形モデルも見ました.
html 5/css 3応答式レイアウト紹介及び設計フローは、css 3のmedia queryメディアクエリー機能を利用する.モバイル端末は一般的にcss 3をサポートする比較的良い高級ブラウザであり、応答式レイアウトのメディアクエリーmedia query互換性の問題を考慮する必要はない. @media screen and (min-width: 600px) and (max-width : 960px)
この条件文から説明すると、mediaプロパティの後ろにはscreenのメディアタイプ(上記の10種類のメディアタイプの1つ)が付いています.それからandキーワードで条件を接続します(他のキーワードにはnot、only、字面を見てみんなが理解できるので、あまり言いません).それから括弧の中は1つのメディアのクエリーの文で、少しcssを理解する学友はすべて理解することができて、この条件の文は600より大きい960より小さい解像度の下で活性化したスタイルの表を意味します.htmlコード:
応答レイアウトは、Ethan Marcotteが2010年5月に提案した概念であり、簡単に言えば、1つのサイトが複数の端末と互換性を持つことができる--各端末のために特定のバージョンを作るのではなく.この概念はモバイルインターネット閲覧を解決するために誕生した.
応答型レイアウトは、異なる端末のユーザーにより快適なインタフェースとより良いユーザー体験を提供することができ、現在の大画面モバイルデバイスの普及に伴い、「大勢の赴くところ」と形容しても過言ではない.ますます多くのデザイナーがこの技術を採用するにつれて、私たちは多くの革新を見ただけでなく、いくつかの成形モデルも見ました.
html 5/css 3応答式レイアウト紹介及び設計フローは、css 3のmedia queryメディアクエリー機能を利用する.モバイル端末は一般的にcss 3をサポートする比較的良い高級ブラウザであり、応答式レイアウトのメディアクエリーmedia query互換性の問題を考慮する必要はない.
この条件文から説明すると、mediaプロパティの後ろにはscreenのメディアタイプ(上記の10種類のメディアタイプの1つ)が付いています.それからandキーワードで条件を接続します(他のキーワードにはnot、only、字面を見てみんなが理解できるので、あまり言いません).それから括弧の中は1つのメディアのクエリーの文で、少しcssを理解する学友はすべて理解することができて、この条件の文は600より大きい960より小さい解像度の下で活性化したスタイルの表を意味します.htmlコード:
<div class="heading"/>
<div class="container">
<div class="left"/>
<div class="main"/>
<div class="right"/>
</div>
<div class="footing"/>
</code></pre>
<br/> css :
<p><span style="color:rgb(102,102,102); font-family:" hiragino="" sans="" gb="" yahei="" micro="" hei="" font-size:14px=""/></p>
<pre><code>*{
margin: 0px;
padding: 0px;
}
.heading,
.container,
.footing{
margin:10px auto;
}
.heading{
height: 100px;
background-color: chocolate;
}
.left,
.right,
.main{
background-color: cornflowerblue;
}
.footing{
height: 100px;
background-color: #ff0000;
}
@media screen and (min-width: 960px) {
.heading,
.container,
.footing{
width: 960px;
}
.left,
.main,
.right{
float: left;
height: 500px;
}
.left,
.right{
width: 200px;
}
.main{
margin: 0px 5px;
width: 550px;
}
.container{
height: 500px;
}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
.heading,
.container,
.footing{
width: 600px;
}
.left,
.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width: 435px;
margin-left: 5px;
}
.container{
height: 400px;
}
}
@media screen and (max-width: 600px){
.heading,
.container,
.footing{
width: 400px;
}
.left,
.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 20px;
width: 400px;
height: 200px;
}
.right{
margin-top: 10px;
}
.container{
height: 420px;
}
}</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div>