标签：
pc端样式重置
*{ margin:0; padding:0;}
body{ font-size:14px; font-family:微软雅黑;font-style:normal;}
a{ text-decoration:none}
a,a:hover{ transition:background 0.5s linear;-webkit-transition:background 0.5s linear;-moz-transition:background 0.5s linear;-o-transition:background 0.5s linear;}
em, i{font-style: normal;}
ul, ol, li{list-style: none;}
img{ border:none;vertical-align:middle;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
p{line-height:22px;}
.fl{float: left;}
.fr{float: right;}
.clear{ clear:both; height:0px; width:100%; overflow:hidden;}
.position{position:relative;}
/*公共样式*/
.layout{ width:1100px; display:table; margin:0 auto;}
/*头部*/
/*导航*/
/*banner*/
/*内容*/
/*底部*/
/******************************************************************************/
移动端页面注意事项：
1.移动端样式重置
/* CSS Document */
*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微软雅黑";}
img{border:none;max-width:100%;vertical-align:middle;}
body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%;}
input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;}
table{border-collapse:collapse;}
input,select,textarea{outline:none;border:none;background:none;}
a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}
a:link,a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
a{text-decoration:none;-webkit-touch-callout:none;}
em,i{font-style:normal;}
li,ol{list-style:none;}
html{font-size:10px;}
.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; padding-bottom:8%;background:#fef9f1;height:100%;}
底部
@media screen and (max-width:320px){body,input,select{font-size:10px}}
@media screen and (min-width:320px){body,input,select{font-size:11.25px}}
@media screen and (min-width:400px){body,input,select{font-size:12.5px}}
@media screen and (min-width:480px){body,input,select{font-size:13.75px}}
@media screen and (min-width:560px){body,input,select{font-size:15px}}
@media screen and (min-width:600px){body,input,select{font-size:16.25px}}
@media screen and (min-width:640px){body,input,select{font-size:18px}}
2.在HTML源文件中的头部head加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
目前公司用到的PC端和移动端的初始化样式
标签：
原文地址：http://www.cnblogs.com/ll-taj/p/5050541.html
