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/

Safari iOS响应破碎

1 个答案: