0

PhoneGap アプリを作成しようとしていますが、メイン メニューには次のようにタイトルと 3 つのボタンがあります。

  <body>
        <div class="app">
            <div class="headerOne">
                <h1></h1>
            </div>  
            <div class="menu">
                <ul>
                    <li>
                        <a class="shop">Shop</a>
                    </li>
                    <li>
                        <a class="login">Login</a>
                    </li>
                    <li>
                        <a class="account">New Account</a>
                    </li>
                </ul>
            </div>  
        </div>
    </body>

これらのボタンをページ全体に表示したいのですが、別の電話画面では変更できるようにするにはどうすればよいですか? これが私のCSSです：

<!-- language:lang-css -->
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                
    -webkit-text-size-adjust: none;             
    -webkit-user-select: none;                  
    background-color:#E4E4E4;

    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);

    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );

    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}

/* Portrait layout (default) */
.app {
    height:100%;                   /* text area height */
    width:100%;                   /* text area width */
    text-align:center;  
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) {
    .app {
        background-position:left center;
    width:100%;
    height:100%;
    }
}

.headerOne{
border: 1px solid black;
background: -webkit-linear-gradient(top, #000000, #333333);
width:100%;
height:30px;
border-radius: 2px;
font-size:24px;
    font-weight:normal;
    text-align:center;
color:white;
margin-bottom:30px;
}

.menu li{
margin-top:30px;
min-height:30px;
min-width:60px; 
}

.shop{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
}

.login{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
-webkit-box-flex:1;
}

.account{
border:1px solid black;
border-radius:2px;
background:black;
color:white;
-webkit-box-shadow:rgb(110,110,110) 2px 2px;
-webkit-box-flex:1;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

また、標準形式の css ファイルも持っています。

 html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
4

1 に答える 1