HTML講座

多デバイス対応

ウィンドウ幅を広げたり狭めたりしてみよう。
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- デバイスの初期解像度(iPhone5s 320×568)を等倍で使用。この設定をしないとデバイスの実解像度(iPhone5s 640×1136)に設定される。 -->
<style>
.width-sample{
    display:flex;
    border:black 3px solid;
    height:400px;
    flex-direction:row; /* アイテムを横に表示 */
}

@media screen and (max-width: 960px){ /* 横解像度が960px以下のデバイス */
    .width-sample{
        flex-wrap:wrap; /* アイテムを折り返して表示 */
        align-content:flex-start;
    }
}

@media screen and (max-width: 640px){　/* 横解像度が640px以下のデバイス */
    .width-sample{
        flex-direction: column; /* アイテムを縦に表示 */
        flex-wrap:nowrap;
    }
}

.flex-item{
    background:#c0c0c0;
    border:black 1px solid;
    width:80px;
    height:80px;
    flex-grow:1;
}
</style>
</head>
<body>
<div class="width-sample">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>
</body>