經常使用的CSSreset整理

說道CSSreset,你們又愛又恨，cssreset好處是，覆蓋了瀏覽器的默認樣式，使前端攻城獅能更加精確的添加樣式，各個瀏覽器中的界面效果都相同。但是大量的、固定的CSSreset也給網頁加載帶來必定阻礙，不少元素及屬性網頁中根本就沒用到。

本人一直堅持認爲在各個瀏覽器界面效果相同的狀況下CSSreset仍是越少越好，今天就給你們總結了一下PC端和移動端網頁中經常使用的CSSreset.

請記住最好的CSSreset並非一成不變的，而是應根據網頁的需求而添加的，因此在用不到的狀況下最好刪除，避免加載過多的CSS而影響網頁性能。

PC端CSSreset

/*PC css reset*/
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%}   /*繼承body設定的字體大小*/    
body{font-family: "Microsoft YaHei",Tahoma,Arial,Simsun,sans-self;}
.clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both;} /*除去浮動*/
.clearfix{zoom:1;}   
a:hover{text-decoration: none;}  
ul,ol{list-style: none;margin:0;padding:0;}    /*當要添加小圖標時可修改*/
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;} /*在IE下除去邊框和底部空白*/
em,i{font-style: normal}  /*如需默認樣式可修改*/
input,select,textarea{vertical-align:middle;outline:none;}  /*出去得到焦點下的藍色邊框*/
textarea{resize:none;}  /*禁止用戶縮放文本框*/
table {border-collapse: collapse;border-spacing: 0;}  
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button;} /*按鈕初始化*/
input::-moz-placeholder,textarea::-moz-placeholder {color: #ccc;}   /*修改placeholder文字顏色*/
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}

　　移動端CSSreset

/*MT css reset*/
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%}   /*繼承body設定的字體大小*/
/* 根據屏幕大小改變文字大小 */
html{font-size:20px;}  /*chorme下設置爲10px無效，推薦設置爲20px，1rem=20px*/
@media screen and (max-width:768px){	/*手機屏幕*/
html{font-size: 15px;}	
}
@media screen and (min-width: 768px) and (max-width:992px){  /*平板屏幕*/
html{font-size: 20px;}
}
@media screen and (min-width: 992px){   /*電腦屏幕*/
html{font-size: 25px;}
}   
body{font-family: "Droid Sans Fallback","Heiti SC","Droid Sans",Helvetica,"Helvetica Neue",sans-self; color:#555; background-color:#F7F7F7;}
.clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both;}   /*除去浮動*/
a:hover{text-decoration: none;}
ul,ol{list-style: none;margin:0;padding:0;} 
img {max-width: 100%;height: auto;} /* 圖片自適應 */
em,i{font-style: normal}  /*如需默認樣式可修改*/
button,input,select,textarea{vertical-align:middle;outline:none;}  /*出去得到焦點下的藍色邊框*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}  /*修改placeholder文字顏色*/