桌面浏览器显示与移动设备不同

Question

我正在尝试创建一个 responsive/adaptive 网页。我正在缩小桌面浏览器的大小，它的布局与移动浏览器不同。他们都使用相同的媒体查询，因为 header 文本在两者中都是红色的。

我不确定这是媒体查询问题（我尝试过许多不同的媒体查询设置）还是 flexbox 问题。任何明显的可能问题或想法？

html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我目前使用的媒体查询：

@media all and (min-width: 21.875rem)

我正在通过混合使用所有前缀：

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Desktop browser

Mobile browser

Answer 1

我不仅需要 flexbox 前缀，还需要所有不同 flexbox 属性的前缀。

所以我也需要所有这些混音：

@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;
}

桌面浏览器显示与移动设备不同

Desktop browser showing different than mobile

media-queries

responsive-design