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) {
}