つい忘れてしまうメディアクエリ(Media Queries)の以下/以上と文字列によるCSSの適用

つい忘れてしまうメディアクエリ(Media Queries)の以下と以上や文字列によるCSSの適用

横幅を条件にしてCSSの適用

「max-width」: 表示領域の最大幅。この横幅以下の場合にのみ適用。

@media screen and (max-width: 800px) {
   /* 800px以下の場合 */
}

 

「mix-width」: 表示領域の最小幅。この横幅以上の場合にのみ適用。

@media screen and (min-width: 600px) {
   /* 600px以上の場合 */
}

 

andを使って、最大幅と最小幅を両方指定。

@media screen and (max-width: 800px) and (min-width: 600px) {
   /* 800px以下~600px以上の場合 */
}

 

クラス・id 名に特定文字列を含む要素を指定する方法

クラス名に 「col-sm が含まれる」

div[class*="col-sm"] {
    margin-bottom: 10px;
}

 

前方一致 + 部分一致

クラス名 「col-sm ではじまる」

div[class^="col-sm"],
div[class*=" col-sm"] {
margin-bottom: 10px;
}

 

Bootstrap 4で「col-sm-※」が1カラムになったときに下側にマージンをつけたい。

@media screen and (max-width: 575px) {
div[class^="col-sm"],
div[class*=" col-sm"] {
margin-bottom: 10px;
}
}

 

コメント

タイトルとURLをコピーしました