よく使用される CSSreset finish_html/css_WEB-ITnose

CSSreset に関しては、好き嫌いが分かれます。CSSreset の利点は、ブラウザのデフォルト スタイルをカバーし、フロントエンド シージ ライオンがスタイルをより正確に追加できることと、各ブラウザのインターフェイス効果です。同じです。ただし、多数の固定 CSSreset は Web ページの読み込みに特定の障害をもたらし、多くの要素や属性が Web ページでまったく使用されません。

各ブラウザのインターフェース効果が同じであれば、CSSreset は少ないほど良いと常々主張してきましたが、今日は PC とモバイル Web ページでよく使用される CSSreset をまとめます

CSSreset は静的ではないことを覚えておいてください。 , ただし、Web ページのニーズに応じて追加する必要があるため、CSS を読み込みすぎて Web ページのパフォーマンスに影響を与えることを避けるために、使用しないときは削除することをお勧めします。

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;}

Mobile 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文字颜色*/