本文将带你了解WEBAPP开发之WebApp--基础搭建，希望本文对大家学WEBAPP有所帮助。

主页面设置

引用的common.css文件

/*禁用iPhone中Safari的字号自动调整*/

html{
-webkit-text-size-adjust:none;
}


/*设置HTML5元素为块*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section{
display:block;
}


/*设置图片视频等自适应调整*/

img{
max-width:100%;
height:auto;
width:auto9;
/*ie8*/
}

.videoembed,
.videoobject,
.videoiframe{
width:100%;
height:auto;
}

body{
font:14px/22px"Georgia",Helvetica,Arial,sans-serif;
background:#fff;
color:#595959;
overflow-y:scroll;
overflow-x:hidden;
*overflow-y:auto!important;
}

a{
text-decoration:none;
cursor:pointer;
}

.Wrapper{
width:100%;
padding:0;
margin:0;
}

li{
list-style:none;
}

a{
text-decoration:none;
color:#555756;
}

a:hover{
color:#141414;
text-decoration:none;
}

aimg{
border:none;
}

a>img{
vertical-align:bottom;
}

.min-height{
min-height:0;
height:auto;
_height:0;
overflow:hidden;
_overflow:visible;
}

.position-absolute{
position:absolute;
}

.position-relative{
position:relative;
}

.overflow-hidden{
overflow:hidden;
}


/*
*-----------------------------------------
*320~480
*-----------------------------------------
*/

@mediaonlyscreenand(min-width:320px)and(max-width:480px){}


/*
*-----------------------------------------
*321~宽大于321的设备
*-----------------------------------------
*/

@mediaonlyscreenand(min-width:321px){}


/*
*-----------------------------------------
*~320宽小于320的设备
*-----------------------------------------
*/

@mediaonlyscreenand(max-width:320px){}


/*
*-----------------------------------------
*~480宽小于480的设备
*-----------------------------------------
*/

@mediaonlyscreenand(max-width:480px){}


/*mediumscreens(excludesiPad&iPhone)*/


/*
*-----------------------------------------
*481~767宽大于480且小于767的iPad和iPhone
*-----------------------------------------
*/

@mediaonlyscreenand(min-width:481px)and(max-width:767px){}


/*ipads(portraitandlandscape)*/


/*
*-----------------------------------------
*768~1024宽大于480且小于1024的iPad和iPhone
*-----------------------------------------
*/

@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){}


/*ipads(landscape)*/


/*
*-----------------------------------------
*768~1024宽大于480且小于1024的iPad和iPhone
*-----------------------------------------
*/

@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){}


/*ipads(portrait)*/


/*
*-----------------------------------------
*768~1024宽大于480且小于1024的iPad和iPhone
*-----------------------------------------
*/

@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){}


/*
*-----------------------------------------
*1444~1824宽大于1444且小于1824的设备
*-----------------------------------------
*/

@mediaonlyscreenand(min-width:1444px)and(max-width:1824px){}


/*
*-----------------------------------------
*1824~宽大于1824的设备
*-----------------------------------------
*/

@mediaonlyscreenand(min-width:1824px){}


/*
*-----------------------------------------
*2224~宽大于2224的设备
*-----------------------------------------
*/

@mediaonlyscreenand(min-width:2224px){}


/*iphone4andhighpixelratio(1.5+)devices*/


/*
*-----------------------------------------
*iphone4~
*-----------------------------------------
*/

@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),
onlyscreenand(min-device-pixel-ratio:1.5){}


/*iphone4andhigherpixelratio(2+)devices(retina)*/

@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),
onlyscreenand(min-device-pixel-ratio:2){}


引用的reset.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,
font,
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{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body{
line-height:1;
}

ol,
ul{
list-style:none;
}

blockquote,
q{
quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after{
content:'';
content:none;
}


/*remembertodefinefocusstyles!*/

:focus{
outline:0;
}


/*remembertohighlightinsertssomehow!*/

ins{
text-decoration:none;
}

del{
text-decoration:line-through;
}


/*tablesstillneed'cellspacing="0"'inthemarkup*/

table{
border-collapse:collapse;
border-spacing:0;
}

注意:在css样式中为根节点设置属性时，padding表现出margin的效果，而margin表现出padding的修改。    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！