css代码初始化

综合腾讯,淘宝,新浪等初始化设置及个人习惯:

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,th,tr,td,dl,dt,dd,img,div,input,textarea,select{margin:0;padding:0;border:0;} 

body{font-size:12px;font-family:"SimSun","宋体","Arial Narrow";}

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

select,input,img,select{vertical-align:middle;} 

ul, ol ,li{ list-style:none; } 

em, b,i { font-style:normal;font-weight:100; } 

a { text-decoration:none; } 

a:hover { text-decoration:underline; } 

 对于只需要适配少量机型,且分辨率对页面影响不大,使用px即可,对于需要适配全部机型时,使用rem作为单位

html{
  font-size: 10px;
}
@media only screen and (min-width: 320px) and (max-width: 375px) {
	html{
		font-size: 11px;
	}
}
@media only screen and (min-width: 376px) and (max-width: 414px) {
	html{
		font-size: 12px;
	}
}
@media only screen and (min-width: 415px) and (max-width: 639px) {
	html{
		font-size: 15px;
	}
}
@media only screen and (min-width: 640px) and (max-width: 719px) {
	html{
		font-size: 20px;
	}
}
@media only screen and (min-width: 720px) and (max-width: 749px) {
	html{
		font-size: 22.5px;
	}
}
@media only screen and (min-width: 750px) and (max-width: 799px) {
	html{
		font-size: 23.5px;
	}
}
@media only screen and (min-width: 800px) {
	html{
		font-size: 25px;
	}
}

  

posted @ 2016-04-13 17:39  小金鱼紫苏  阅读(193)  评论(0编辑  收藏  举报