媒体断点不适用于 wordpress [英] Media breakpoints not working on wordpress
本文介绍了媒体断点不适用于 wordpress的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用 bootstrap-four 主题的 wordpress 页面
I have a wordpress page using the bootstrap-four theme
我似乎无法让媒体断点工作.在我的自定义样式表 (style.css) 的末尾，我尝试了:
I can't seem to get the media breakpoints to work. At the end of my custom stylesheet (style.css) I tried:
@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;
}
}
我确保 在 中...
I made sure that <meta name="viewport" content="width=device-width, initial-scale=1"> is in the <head>...</head>
我还缺少什么?
推荐答案
您使用了错误的 @media mixin.仅使用 @media 屏幕和 (min-width : ---px)
You are using the wrong @media mixin. Use @media only screen and (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) {
}
示例:桌面 -> 移动
Example: desktop -> mobile
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
