Safari iOS响应损坏

Question

我使用以下网格布局编写了一个站点：

    Grid
*/
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.col {
  flex-basis: 100%;
}
@media screen and (min-width: 800px) {
  .col {
    flex: 1;
  }
}

它在我的所有浏览器和设备中都能很好地运行，除了 iOS 上的 Safari ......这太奇怪了，我以前从未遇到过。

您可以在以下位置查看该网站： https://etmartinkazoo.github.io/evolution/

您可以在以下位置查看带有代码的存储库： https://github.com/etmartinkazoo/evolution

任何帮助将不胜感激，谢谢！

Answer 1

您的网站在最新版本的 Safari 上也无法正确显示。我建议在你的css前面加上前缀，以确保你在(所有(浏览器中得到相同的布局。

这里有一些sass mixin，可以让您以简单的方式做到这一点

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}
.wrapper {
  @include flexbox();
}
.item {
  @include flex(1 200px);
  @include order(2);
}

查看此链接以获取更多示例。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有关 sass 的更多信息，请转到此处 http://sass-lang.com/