Question

最近我一直致力于使用HTML5 / CSS3的移动优化网络平台。此应用程序有一个登陆页面，其中包含四个大小相同的瓷砖，中间有一个Icon（其他一些样式，如它们之间的填充和边界半径等）。这些图块的大小根据屏幕大小使用“ display：flex; ”显然是由于用户可以更改屏幕方向的性质。

我使用以下标记来实现这一目标......

HTML

<div class="container">        
    <a href="1.aspx">
        <span class="icon1"></span>
    </a>
    <a href="2.aspx">
        <span class="icon2"></span>
    </a>
    <a href="3.aspx">
        <span class="icon3"></span>
    </a>
    <a href="4.aspx">
        <span class="icon4"></span>
    </a>
</div>

CSS

.container {
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }   

    .container a {
        -webkit-flex: 1 1 48%;
        flex: 1 1 48%;
        margin: 1%;
        position: relative;

        -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
                border-radius: 8px;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        }

我遇到了一个相当令人沮丧的问题，即在iOS或Android上Chrome浏览器（适用于Beta，而不是当前版本）上根本无法正常显示。

基本上我想重新编写CSS以实现完全相同的布局，但我很难找到另一种方法来做到这一点，非常感谢任何帮助。

Answer 1

Beta可能会支持最近的功能重新草稿（您在代码中使用它），而旧版浏览器（即目前尚未测试的浏览器）则使用不同的语法。关于这个here有一篇很好的文章。同时，caniuse.com非常适合快速检查支持内容的内容。

Answer 2

使用以下标记自行解决。

<强> HTML

    <div class="landingwrap">
        <div class="landingstrip">
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
        </div>
        <div class="landingstrip">
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
       </div>
  </div>

<强> CSS

body {
     background: #222;

}
.landingwrap {

    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}
.landingstrip {
    height: 50%;
}
.landingicon-wrap {
    float: left;
    position: relative;
    width: 50%;
    height: 100%;
}
.landingicon {
    background-color: #2aace2;
    position: absolute;
        top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}

工作一种享受。 JSFIDDLE

替代＆＃34;显示：-webkit-flex＆＃34;适用于Chrome Mobile

2 个答案: