Question

我有一个使用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>

我还缺少什么？

Answer 1

您使用的是错误的@media mixin。使用@media only屏幕和（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) {

}

示例：desktop - ＆gt;移动

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) {

}

媒体断点不适用于wordpress

1 个答案: