星空网 > 软件开发 > 网页设计

常用的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文字颜色*/

  

 




原标题:常用的CSSreset整理

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊香薰蜡烛销量同比增长20%;2023年美国玩具市场需求放缓 | 跨境电商日报:https://www.kjdsnews.com/a/1729934.html
亚马逊北美、欧洲站点发布产品信息要求:https://www.kjdsnews.com/a/1729935.html
亚马逊什么品类在旺季容易爆单:https://www.kjdsnews.com/a/1729936.html
Shopify平台使用最常用的支付方式有哪些?:https://www.kjdsnews.com/a/1729937.html
2023外贸前10强排名出来了!有黑马杀入!:https://www.kjdsnews.com/a/1729938.html
MSK航线调整!涉及印度和中东!:https://www.kjdsnews.com/a/1729939.html
恐怖游轮2002 恐怖游轮2022:https://www.vstour.cn/a/365178.html
时尚电商平台Meesho拟融资3亿美元!:https://www.kjdsnews.com/a/1836524.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流