50％幅が小さすぎると、100％div幅を使用します。

Question

は、XX%のデフォルトサイズを持つdivをどのように作成できますか？画面が小さくなり過ぎると、100%サイズに切り替わりますか？私はmin-widthプロパティを使用しようとしましたが、この問題はmin-widthに達した後に応答しなくなり、画面がさらに小さくなるとオーバーフローします。

Answer 1

@mediaクエリを使用する必要があります。それでは、あなたがウェブページの50％のみを取り、その後、あなたはそれが携帯電話に入るとそれに全幅を表示する必要があるの<div>を持っているとしましょう、640px幅を言う：

div { 
    width: 50%; 
} 

@media screen and (max-width: 640px) { 
    div { 
    width: 100%; 
    } 
} 

Answer 2

あなたは@mediaでそれを行うことができますクエリ、例えば：

div { 
 
    width: 50%; 
 
    height: 100px; 
 
    border: 1px solid; 
 
} 
 

 
@media screen and (max-width: 568px) { /* adjust to your needs */ 
 
    div { 
 
    width: 100%; 
 
    } 
 
}

<div></div>

Answer 3

あなたは、このようにそのための@mediaを使用する必要があります。

@media screen and (min-width: 769px) { 
    /* STYLES HERE */ 
} 

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */ 
} 

@media only screen and (max-device-width: 480px) { 
    /* STYLES HERE */ 
}