使用IE的媒体查询;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

或者简单的sas - compass:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

例子:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}

这里有一个更简单的一站式解决方案，包括基于媒体查询的独立响应文件。

这允许所有媒体查询逻辑和包含逻辑只存在于一个页面，即加载器。它还允许媒体查询不会使响应式样式表本身混乱。

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

基地。更少的会像这样

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

sm-min。更少的会像这样

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

你的索引只需要加载loader。less

<link rel="stylesheet/less" type="text/css" href="loader.less" />

很简单…

基于bisio的答案和Bootstrap 3代码，我能够为那些只想复制并粘贴完整媒体查询集到样式表的人提供一个更准确的答案:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

:)

在最新的bootstrap(4.3.1)中，使用SCSS(SASS)，您可以使用来自/bootstrap/ SCSS /mixins/_breakpoints.scss的@mixin之一

至少是最小断点宽度的媒体。不查询最小的断点。 使@content应用于给定的断点并更广泛。

@mixin media-breakpoint-up($name， $breakpoints: $grid-breakpoints)

最多为最大断点宽度的媒体。不查询最大的断点。 使@content应用于给定的断点并变窄。

@mixin media-breakpoint-down($name， $breakpoints: $grid-breakpoints)

跨越多个断点宽度的媒体。 使@content应用于最小断点和最大断点之间

@mixin media-breakpoint-between($lower， $upper， $breakpoints: $grid-breakpoints)

断点的最小宽度和最大宽度之间的媒体。 最小的断点没有最小值，最大的断点没有最大值。 使@content仅应用于给定的断点，而不扩大或缩小视口。

@mixin media-breakpoint-only($name， $breakpoints: $grid-breakpoints)

例如:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

文档:

介绍https://getbootstrap.com/docs/4.3/layout/overview/ responsive-breakpoints 迁移https://getbootstrap.com/docs/4.3/migration/ responsive-utilities 变量https://getbootstrap.com/docs/4.3/layout/grid/变量

快乐编码;)

使用IE的媒体查询;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}