[Bootstrap] メディアクエリーの書き方 (LESS)

いつも探すのでメモ

#コード

@media (max-width: @screen-xs-max) {
    content: "xs";
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    content: "sm";
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    content: "md";
}

@media (min-width: @screen-lg-min) {
    content: "lg";
}

#Bootstrapのvariables.less

ちなみに設定値は以下の通り

@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;

@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);