レイアウトの変更を使用したレスポンシブウェブデザイン

レスポンシブウェブデザインを初めて使用しています。私が望む出力は、画面の幅が500px未満のとき、つまり画像がmedia query less than 500pxのときに、ダークブルー、ライトブルー、グリーン、レッドの色を含むdivタグです。レイアウトの変更を使用したレスポンシブウェブデザイン

画面の幅が500pxより大きい場合は、コードスニペットの出力と同じように表示する必要がありますが、最初の表示はwrongly displayed for screen < 500pxです。

最初のものはブラウザを最小化することで得ることができます。私はis.plsを使用しているhtmlとcssはなぜそれが淡青色と緑色を表示していないのかを伝えます。

.container{ 
 

 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 

 
.box{ 
 
    width:100%; 
 
    min-height: 150px; 
 
} 
 

 
.dark-blue { 
 
    background-color: blue; 
 
    } 
 
.light-blue { 
 
    background-color: skyblue; 
 
} 
 
.green { 
 
    background-color: #0C8542; 
 
} 
 
.red { 
 
    background-color: #EC1D3B; 
 
} 
 

 
@media screen and (min-width:500px) 
 
{ 
 
#container2 
 
{ 
 
    width:50%; 
 
} 
 
.dark-blue 
 
{ 
 
    width:50%; 
 
} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Layout Shift</title> 
 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
 
<link type="text/css" rel="stylesheet" href="main.css"> 
 
</body> 
 
<div class="container"> 
 
    <div class="box dark-blue"></div> 
 
<div class="container" id="container2"> 
 
     <div class="box light-blue"></div> 
 
     <div class="box green"></div> 
 
     </div> 
 
    <div class="box red"></div> 
 
</div> 
 
</body> 
 
</html>

。

出典

2016-10-30 Arul

はどうなりますか？ – mm759

これはどのように見えるのですか？ http://codepen.io/panchroma/pen/NRZMZR

CSSでは、@ mediaクエリの中で.containerスタイリングを移動しました。変更の最終結果は、ビューポートの幅が500px未満では.containerの表示がブロックで、各divは全幅になります。

希望すると便利です。あなたはCSSで.box.dark-青で.dark青を交換する場合

CSS

.box{ 
    width:100%; 
    min-height: 150px; 
} 

.dark-blue { 
    background-color: blue; 
    } 
.light-blue { 
    background-color: skyblue; 
} 
.green { 
    background-color: #0C8542; 
} 
.red { 
    background-color: #EC1D3B; 
} 

@media screen and (min-width:500px){ 
    .container{ 
    display:flex; 
    flex-wrap:wrap; 
    } 

    #container2{ 
    width:50%; 
    } 
    .dark-blue{ 
    width:50%; 
    } 
}

出典

2016-10-30 23:54:31

レイアウトの変更を使用したレスポンシブウェブデザイン

答えて

関連する問題