Question

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

我不确定这是否是媒体查询问题（我尝试了很多不同的媒体查询设置），或者它是否是Flexbox问题。任何明显的可能问题或想法？

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

Answer 1

我不仅需要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;
}

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

1 个答案: