7

最近、私は HTML5/CSS3 を利用してモバイル向けに最適化された Web プラットフォームに取り組んでいます。このアプリケーションには、中央にアイコンがある 4 つの同じサイズのタイルで構成されるランディング ページがあります (その他のスタイルには、それらの間の少しのパディングや境界線の半径など)。これらのタイルは、「 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 モバイル (現在のバージョンではなくベータ版で動作) でこれがまったく正しく表示されないという、かなり苛立たしい問題に遭遇しました。

基本的に、CSSを書き直してまったく同じレイアウトを実現しようとしていますが、それを行う別の方法を見つけるのに苦労しています。どんな助けも大歓迎です。

4

2 に答える 2

1

次のマークアップを使用して自分で解決しました。

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

于 2013-02-05T11:09:00.410 に答える
1

ベータ版は、機能の最近の再ドラフト (コードで使用している) をサポートする可能性がありますが、古いブラウザー (つまり、現在ベータ版ではないもの!) は別の構文を使用していました。これに関する良い記事がここにあります。一方、caniuse.comは、何が何をサポートしているかを簡単に確認するのに最適です。

于 2013-01-29T14:59:23.577 に答える