私はCSSでメディアクエリを使用することに非常に熱心ですが、それを使用する方法に混乱しています。私は立っています
私のクエリ要件は
画面の幅が100〜480の場合、異なるスタイルが表示されます。
画面幅が481〜600の場合、異なるスタイルが発生します。
画面幅が601から800の場合、異なるスタイルが発生します。
画面幅801の場合、デフォルトのCSSが機能するはずです。
私はCSSでメディアクエリを使用することに非常に熱心ですが、それを使用する方法に混乱しています。私は立っています
私のクエリ要件は
画面の幅が100〜480の場合、異なるスタイルが表示されます。
画面幅が481〜600の場合、異なるスタイルが発生します。
画面幅が601から800の場合、異なるスタイルが発生します。
画面幅801の場合、デフォルトのCSSが機能するはずです。
.class { /* default style */ }
@media (min-width: 100px) and (max-width: 480px) {
.class { /* style */ }
}
@media (min-width: 481px) and (max-width: 600px) {
.class { /* style */ }
}
@media (min-width: 601px) and (max-width: 800px) {
.class { /* style */ }
}
基本は、この種のクエリの使用に依存しています。
@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make
your site pretty on this range.*/
}
レスポンシブウェブデザインを使用する場合は、可能な場合はフォントにもパーセンテージを使用する必要があることに注意してください。
メディアクエリがIEで利用できるようになりました。使用できる場合は、http://caniuse.com/#feat=css-mediaqueriesを参照してください。私が使用していて良い結果が得られたポリフィルはresponse.jsです
私は次のようなものを信じています:
@media screen and (min-width: 100px) and (max-width: 480px)
{
/* Change main container '.wrapper' */
.wrapper
{
width: 100px;
}
}
@media screen and (min-width: 480px) and (max-width: 600px)
{
.wrapper
{
width: 480px;
}
}
..等