つい忘れてしまうメディアクエリ(Media Queries)の以下と以上や文字列によるCSSの適用
横幅を条件にしてCSSの適用
「max-width」: 表示領域の最大幅。この横幅以下の場合にのみ適用。
|
1 2 3 |
@media screen and (max-width: 800px) { /* 800px以下の場合 */ } |
「mix-width」: 表示領域の最小幅。この横幅以上の場合にのみ適用。
|
1 2 3 |
@media screen and (min-width: 600px) { /* 600px以上の場合 */ } |
andを使って、最大幅と最小幅を両方指定。
|
1 2 3 |
@media screen and (max-width: 800px) and (min-width: 600px) { /* 800px以下～600px以上の場合 */ } |
クラス・id 名に特定文字列を含む要素を指定する方法
クラス名に 「col-sm が含まれる」
|
1 2 3 |
div[class*="col-sm"] { margin-bottom: 10px; } |
前方一致 + 部分一致
クラス名 「col-sm ではじまる」
|
1 2 3 4 |
div[class^="col-sm"], div[class*=" col-sm"] { margin-bottom: 10px; } |
Bootstrap 4で「col-sm-※」が1カラムになったときに下側にマージンをつけたい。
|
1 2 3 4 5 6 |
@media screen and (max-width: 575px) { div[class^="col-sm"], div[class*=" col-sm"] { margin-bottom: 10px; } } |
コメント