css布局通用类

工作中做了不少的网页，感觉每个网页大都具备相似之处，尤其是手机端的，今天我把工作中使用得最多的定义到base.css文件中，主要针对的是移动端设备，运用了rem这个css3的单位，希望能提高以后的工作效率。

话不多说，上手base.css代码如下

@charset "utf-8";

/*重要提示：base.css 是基础样式表文件，尽可能在每个页面均链接到本文件使得编写样式更加轻松。*/
/*          建议在编排页面时尽可能将元素放入class=containter的容器中，以保证元素在页面正确的位置*/
/*          建议在清除浮动的时候选择使用clearfix这个class*/
/*          在为不同尺寸的设备编写不同样式的时候统一在最下方的五个媒体查询代码中*/

/*public style sheet*/
*{font-style:normal;font-weight:200;text-decoration:none;font-family:"microsoft yahei";}
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,pre,table,thead,tbody,tfoot,caption,th,td,form,input,button,select,textarea,i,b,em,span,strong,a{padding:0;margin:0;list-style:none;}
html{font-size:62.5%;min-width:300px;margin:0px auto;}
@media screen and (min-width:300px) and (max-width:479px){
    html{font-size:40.5%; }
}
@media screen and (min-width:480px) and (max-width:640px){
    html{font-size:48%; }
}
@media screen and (min-width:640px){
    html{font-size:62.5%; }
}
h1,h2,h3,h4,h5,h6{text-align:center;font-weight:800;}
body,a{font-size:1.5rem;color:#444;}
a:hover{text-decoration:none;}
li{list-style:none;}
img{border:none;max-width:100%;height:auto;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:"\200B";display:block;clear:both;height:0;}
.clearfix{*zoom:1;}
.hide{color:transparent;background:none;display:none;opacity:0;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity = 0);filter:alpha(opacity = 0);}
body{font-size:2rem;font-family:"microsoft yahei";background-color:#fffefe;margin-left:auto;margin-right:auto;min-width:300px;*zoom:1;overflow-x:hidden;}
/*General container*/
.container{padding:0;margin:0 auto;display:block;width:100%;max-width:640px;overflow-x:hidden;*zoom:1;}
.container:after{content:"\200B";display:block;clear:both;height:0;}


/*media style*/
@media screen and (max-width:640px) {
}
@media screen and (max-width:480px) {
}
@media screen and (max-width:420px) {
}
@media screen and (max-width:380px) {
}
@media screen and (max-width:320px) {
}

如果本文有欠缺之处，还望留言斧正。