iOS的Safari浏览器响应破碎

Question

我编写具有以下电网布局的网站：

Grid 
*/ 

.row { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.col { 
    flex-basis: 100%; 
} 

@media screen and (min-width: 800px) { 

    .col { 
    flex: 1; 
    } 

} 

它在我所有的浏览器和设备使用Safari的iOS上的异常工作精美...这是超级奇怪我从来没有遇到过它。

您可以查看网站：https://etmartinkazoo.github.io/evolution/

您可以用代码查看资料库：https://github.com/etmartinkazoo/evolution

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

Answer 1

您的网站在最新版本的Safari上无法正确显示。我会建议在你的CSS前加一个，以确保你在（所有）浏览器中获得相同的布局。

这里有一些青菜混入，将允许你这样做以简单的方式

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

有关萨斯更多信息，请点击这里http://sass-lang.com/