CSSでこれをCSSで達成されるであろうどのようにこの</p> <p><a href="http://gomagames.com/blocks/blocks_sassy.html" rel="nofollow">http://gomagames.com/blocks/blocks_sassy.html</a></p> <p>に似

Question

何か色が変化する応答ウェブサイトを作成しますか？

Answer 1

CSSで@mediaルールを使用できます。

この例では、画面サイズに応じてbodyタグとdivタグの背景色を変更します。

@media screen and (max-width: 400px) { 
 
    body { 
 
     background-color: lightgreen; 
 
    } 
 
    .mydiv { 
 
     background-color:#000; 
 
    } 
 
} 
 

 
@media screen and (min-width: 401px) and (max-width: 1000px) { 
 
    body { 
 
     background-color: green; 
 
    } 
 
    .mydiv { 
 
     background-color:#444; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1001px) { 
 
    body { 
 
     background-color: blue; 
 
    } 
 
    .mydiv { 
 
     background-color:#999; 
 
    } 
 
} 
 

 
.mydiv { 
 
    width:100%; 
 
    height:20px; 
 
    margin:10px 0; 
 
}

<div class="mydiv"> 
 
</div> 
 
<div class="mydiv"> 
 
</div> 
 
<div class="mydiv"> 
 
</div>