美文网首页
pc端与移动端css初始设置

pc端与移动端css初始设置

作者: shine001 | 来源:发表于2021-11-22 09:27 被阅读0次

    CSS初始设置

    /*PC端重置*/
    *{
      padding: 0;
      margin: 0;
    }
    body{
       font: 12px/24px Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif;
       color: #333;
    }
    a{
      color: #333;
      text-decoration: none;
    }
    img{
      border: 0;
    }
    ul,li{
      list-style: none;
    }
    h1,h2,h3,h4,h5,h6{
      font-weight: normal;
      font-style: normal;
    }
    .clearfix:before,
    .clearfix:after {
       content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
    }
    .clearfix {
        zoom: 1;
    }
    meta标签初始设置
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="keywords" content="" >
    <meta name="description" content="">
    
    
    /*可不写*/
    <meta property="og:image" content="" />
    <link  type="image/x-icon" rel="icon" href="" >
    

    移动端初始化设置

    /* meta标签*/
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
    /* 重置样式 */
    * {
      -webkit-tap-highlight-color: transparent;
      outline: 0; 
    }
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
      margin: 0;
      padding: 0;
      vertical-align: baseline; 
    }
    img {
      border: 0 none;
      vertical-align: top; 
    }
    i, em {
      font-style: normal; 
    }
    ol, ul {
      list-style: none; 
    }
    input, select, button, h1, h2, h3, h4, h5, h6 {
      font-size: 100%;
      font-family: inherit;
     }
    table {
      border-collapse: collapse;
      border-spacing: 0; 
    }
    a, a:visited {
      text-decoration: none;
      color: #333; 
    }
    body {
      margin: 0 auto;
      font-size: 14px;
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      line-height: 1.5;
      color: #666;
      -webkit-text-size-adjust: 100% !important;
      /*-webkit-user-select: none;
      user-select: none;*/
     }
    /* rem单位切换
    ---------------------------------------- */
    /* html根元素大小
    ---------------------------------------- */
    html {
      font-size: 20vw; }
      @media screen and (max-width: 320px) {
        html {
          font-size: 64px; } }
      @media screen and (min-width: 540px) {
        html {
          font-size: 108px; } }
    
    body {
      max-width: 540px;
      min-width: 320px; }
    

    视口单位换算

    /* 定义基准 750或640 等等 */
    $vw_fontsize: 75;
    rem = ($px / 2 / $vw_fontsize) * 1rem;
    

    相关文章

      网友评论

          本文标题:pc端与移动端css初始设置

          本文链接:https://www.haomeiwen.com/subject/mndhtrtx.html