桌面浏览器显示不同于移动浏览器答案

【问题标题】：Desktop browser showing different than mobile桌面浏览器显示不同于移动浏览器
【发布时间】：2015-04-22 12:29:19
【问题描述】：

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

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

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

Desktop browser

Mobile browser

【问题讨论】：

stackoverflow.com/questions/27634203/…

标签： responsive-design media-queries

【解决方案1】：

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

所以我也需要所有这些 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;
}

【讨论】：