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 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/