我正在尝试创建一个自适应/自适应网页。我正在缩小桌面浏览器的大小，它的布局与移动浏览器的布局不同。它们都使用相同的媒体查询，因为两者的标题文本均为红色。
我不确定这是媒体查询问题（我尝试过许多不同的媒体查询设置）还是是弹性框问题。有明显的可能的问题或想法吗？
的HTML：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我当前正在使用的媒体查询：
@media all and (min-width: 21.875rem)
我通过mixin使用所有前缀：
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
我不仅需要flexbox前缀，还需要所有不同flexbox属性的前缀。
所以我也需要所有这些mixin：
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin flex-flow($values) {
-webkit-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
@mixin align-items($val) {
-webkit-align-items: $val;
-ms-flex-align: $val;
align-items: $val;
}
@mixin align-self($val) {
-webkit-align-self: $val;
-ms-flex-item-align: $val;
align-self: $val;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin justify-content($val) {
-webkit-justify-content: $val;
-ms-flex-pack: $val;
flex-content: $val;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句