zoukankan      html  css  js  c++  java
  • html Css PC 移动端 公用部分样式代码整理

    css常用公用部分样式代码整理:

    body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  
    li, dl, dt, dd, form, a, fieldset, input, th, td  
    {margin: 0; padding: 0; border: 0; outline: none;}  
    ul, ol{list-style: none;}  
    a{color: black;text-decoration: none;}  
    a:hover {text-decoration: underline;}  
    html{font-size: 10px;font-family: "Microsoft YaHei",Arial;}  
    

      

    任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

    那么12px=0.75em,10px=0.625em。为了简化font-size的换算,

    需要在css中的body选择器中声明Font-size=62.5%,

    这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 

    也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。 

     

    视口设置:

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />

     

    媒体查询

     

    /*reset css*/ *,

    ::before,::after{

           margin:0; padding:0; 

          /*清除移动端默认的点击高亮效果*/

          -webkit-tap-highlight-color:transparent;

         /*设置以边框开始计算宽度*/

          -webkit-box-sizing:border-box; 

          box-sizing:border-box;

     }

     body

          font-size:14px;

          font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/

          color:#333;

           

    a

          color:#333;

          text-decoration:none;

     }

     a:hover 

          text-decoration:none;

      }

     ul,ol {

          list-style:none;

     }

     input 

          border:none;

          outline:none; /*清除移动端默认的表单样式*/

          -webkit-appearance:none;

        

    /*common css*/ 

    .f_leftfloat:left; 

    .f_rightfloat:right; 

    .clearfix::before,.clearfix::after {

    content:""; 

    height:0; 

    line-height:0; 

    display:block; 

    visibility:hidden;

    clear:both; 

    }

     

     

     

     
  • 相关阅读:
    [图论训练]1143: [CTSC2008]祭祀river 二分图匹配
    [图论训练]BZOJ 2118: 墨墨的等式 【最短路】
    HDU 5402 : Travelling Salesman Problem
    [图论训练]BZOJ 3245: 最快路线【最短路】
    BZOJ 1724: [Usaco2006 Nov]Fence Repair 切割木板
    Android 全屏方法
    【转载】差分约束
    BZOJ 1688: [Usaco2005 Open]Disease Manangement 疾病管理
    Pain for friend
    BZOJ 1739: [Usaco2005 mar]Space Elevator 太空电梯
  • 原文地址:https://www.cnblogs.com/agansj/p/9339119.html
Copyright © 2011-2022 走看看