我正在尝试制作一个 PhoneGap 应用程序，主菜单有标题和三个按钮，如下所示：
<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;
}