zoukankan      html  css  js  c++  java
  • 常用的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-768px){	/*手机屏幕*/
    html{font-size: 15px;}	
    }
    @media screen and (min- 768px) and (max-992px){  /*平板屏幕*/
    html{font-size: 20px;}
    }
    @media screen and (min- 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- 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文字颜色*/
    

      

  • 相关阅读:
    Linux xargs 命令
    Shell 流程控制
    springSecurity---AuthenticationProvider解析
    nginx unknown directive "stream"
    Linux清空文件内容
    解决RabbitMQ报错 Error: unable to connect to node rabbit@localhost:
    mysql bit类型 使用Mysql命令行查询的时候无法看到其值
    今日进度
    每周总结
    今日进度
  • 原文地址:https://www.cnblogs.com/jesse131/p/4841022.html
Copyright © 2011-2022 走看看