はんのうネットワーク

10384 ワード
CSS テキストリンク

はんのうネットワーク


デバイスの種類とサイズに応じてWebページのサイズを自動的に変更

使用方法

  • css

    • メディアタイプ


    all、aural、ブラインド、ハンドヘルド、print、screenなど
  • で現在最もよく使われているのはallとscreenです.

    • 単純な例


    ex1)

    <html>
<style>

div{
    width:100%;
    height:100%;
}
@media screen and (max-width:500px){
    div{background-color:blue;}
}
@media screen and (min-width:500px) and (max-width:700px){
    div{background-color : red;}
}
@media screen and (min-width:700px){
    div{background-color : green;}
}

</style>
<body>
    <div></div>
</body>
</html>
    500以下は青、500~700以下は赤、700以上は緑.

    ex2)

    <html>
<style>

div{
    display:inline-block;
}

.a{
    width:300px;
    height:300px;
}
.b{
    width:200px;
    height:300px;
}
.c{
    width:500px;
    height:300px;
}
@media screen and (max-width:600px){
    div{background-color:blue;}
}
@media screen and (min-width:600px) and (max-width:700px){
    div{background-color : red;}
}
@media screen and (min-width:700px){
    div{background-color : green;}
}

</style>
<body>
    <article>
    <div class='a'></div>
    <div class='b'></div>
    <div class='c'></div>
    </article>
</body>
</html>
    ブラウザのサイズによって、div胎によって色が異なります.
    CCF(圧縮符号化):動的計画＋平行四角形最適化
    以太坊ABI生成を理解する