常用的CSSreset整理
2024-10-12 21:26:15
说道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文字颜色*/
最新文章
- 洛谷10月月赛Round.3
- Redis各类型应用场景
- JSP中九大内置对象及其数据类型
- ftp服务器远程拷贝命令
- android: 使用 AsyncTask
- android 定制自己的日志工具
- Linux 安装Maven和nexus代理仓库
- @property中有哪些属性关键字?/ @property 后面可以有哪些修饰符?
- Dagger2学习之由浅入深
- Hadoop学习历程(一、编译)
- 什么是nginx?
- eclipse中修改maven本地仓库方式
- javascript 小方块平移
- SI和DI
- SD从零开始03-04
- solaris 软件包地址
- qtp descriptive programming multiple language(多语言支持)
- 关于Struts2开发过程中遇到的问题和解决方案
- if no 和 if not
- bzoj 2178 圆的面积并——辛普森积分