媒体断点在 wordpress 上不起作用答案

【问题标题】：Media breakpoints not working on wordpress媒体断点在 wordpress 上不起作用
【发布时间】：2017-08-15 22:40:21
【问题描述】：

我有一个使用 bootstrap-four 主题的 wordpress 页面

我似乎无法让媒体断点工作。在我的自定义样式表（style.css）结束时，我尝试了：

@include media-breakpoint-down(xs) {
   body {
     color: red;
   }
}

@media screen and (min-width: 576px) {
  body {
    color: red;
  }
}

@media screen (min-width: 576px) {
  body {
    color: red;
  }
}

@media (min-width: 576px) {
  body {
    color: red;
  }
}

我确保<meta name="viewport" content="width=device-width, initial-scale=1"> 在<head>...</head> 中

我还缺少什么？

【问题讨论】：

标签： css wordpress twitter-bootstrap

【解决方案1】：

您使用了错误的@media mixin。仅使用 @media 屏幕和 (min-width : ---px)

移动优先示例：

https://jsfiddle.net/g8awz9g4/1/

代码：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

示例：桌面 -> 移动

https://jsfiddle.net/g8awz9g4/2/

代码：

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

【讨论】：

这行得通（虽然我想要的效果是使用最大宽度），但为什么@include media-breakpoint-down(xs) 不能与引导程序一起使用？
为你添加了 max-width，你有 _breakpoints.scss 吗？见：stackoverflow.com/questions/32545506/…
问题是关于 BS4 中提供的 mixin，所以尽管您的样式有效，但他实际上并不是在问什么 - 根据上面的 @Marc 评论，请检查是否包含正确的 SCSS。