CSSのメディアクエリで、一定範囲のみ適用したい

Question

1000px~1100pxの範囲でのみmarginをかけたいのですが、どのようにしたらできますか？

イメージとしてはこうなのですが、ないですよね？

@media (max-width: 1100px & min-width: 1000px) {
	.box{
		margin-left: 10px;
		margin-right: 10px;
	}	
}

１つずつ書いてみたのですがなぜか適用されませんでした。何か方法あるのでしょうか？

@media (max-width: 1100px) {
	.box{
		margin-left: auto;
		margin-right: auto;
	}	
}
@media (min-width: 1000px) {
	.box{
		margin-left: 10px;
		margin-right: 10px;
	}	
}
@media (max-width: 999px) {
	.box{
		margin-left: auto;
		margin-right: auto;
	}	
}

Answer 1

andは使えますよ。

@media (max-width: 1100px) and (min-width: 1000px) {
    .box{
        margin-left: 10px;
        margin-right: 10px;
    }    
}

【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Creating_complex_media_queries

時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 not, and, only の論理演算子の出番です。

Comments

[konsai]

そうやって書くんですね。リンクまでありがとうございます。