Vue - 移动端项目初始设置

一. 引入完整meta

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

二. 引入 reset.css 文件，初始化项目样式

• main.js 文件中引入reset.css文件
• reset.css

  @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
  body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
  body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
  h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
  h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
  h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
  address,cite,dfn,em,i,optgroup,var{font-style:normal}
  table{border-collapse:collapse;border-spacing:0;text-align:left}
  caption,th{text-align:inherit}
  ul,ol,menu{list-style:none}
  fieldset,img{border:0}
  img,object,input,textarea,button,select{vertical-align:middle}
  article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
  audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
  blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
  textarea{overflow:auto;resize:vertical}
  input,textarea,button,select,a{outline:0 none;border: none;}
  button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
  mark{background-color:transparent}
  a,ins,s,u,del{text-decoration:none}
  sup,sub{vertical-align:baseline}
  html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
  body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
  hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
  a {color: #25a4bb;text-decoration: none;}
  
  

三. 解决 1 物理像素边框问题

• main.js 文件中引入border.css文件
• border.css

  @charset "utf-8";
  .border,
  .border-top,
  .border-right,
  .border-bottom,
  .border-left,
  .border-topbottom,
  .border-rightleft,
  .border-topleft,
  .border-rightbottom,
  .border-topright,
  .border-bottomleft {
      position: relative;
  }
  .border::before,
  .border-top::before,
  .border-right::before,
  .border-bottom::before,
  .border-left::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::before,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-topright::after,
  .border-bottomleft::before,
  .border-bottomleft::after {
      content: "\0020";
      overflow: hidden;
      position: absolute;
  }
  /* border
   * 因，边框是由伪元素区域遮盖在父级
   * 故，子级若有交互，需要对子级设置
   * 定位 及 z轴
   */
  .border::before {
      box-sizing: border-box;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border: 1px solid #eaeaea;
      transform-origin: 0 0;
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
      left: 0;
      width: 100%;
      height: 1px;
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
      top: 0;
      width: 1px;
      height: 100%;
  }
  .border-top::before,
  .border-topbottom::before,
  .border-topleft::before,
  .border-topright::before {
      border-top: 1px solid #eaeaea;
      transform-origin: 0 0;
  }
  .border-right::before,
  .border-rightbottom::before,
  .border-rightleft::before,
  .border-topright::after {
      border-right: 1px solid #eaeaea;
      transform-origin: 100% 0;
  }
  .border-bottom::before,
  .border-topbottom::after,
  .border-rightbottom::after,
  .border-bottomleft::before {
      border-bottom: 1px solid #eaeaea;
      transform-origin: 0 100%;
  }
  .border-left::before,
  .border-topleft::after,
  .border-rightleft::after,
  .border-bottomleft::after {
      border-left: 1px solid #eaeaea;
      transform-origin: 0 0;
  }
  .border-top::before,
  .border-topbottom::before,
  .border-topleft::before,
  .border-topright::before {
      top: 0;
  }
  .border-right::before,
  .border-rightleft::after,
  .border-rightbottom::before,
  .border-topright::after {
      right: 0;
  }
  .border-bottom::before,
  .border-topbottom::after,
  .border-rightbottom::after,
  .border-bottomleft::after {
      bottom: 0;
  }
  .border-left::before,
  .border-rightleft::before,
  .border-topleft::after,
  .border-bottomleft::before {
      left: 0;
  }
  @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
      /* 默认值，无需重置 */
  }
  @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
      .border::before {
          width: 200%;
          height: 200%;
          transform: scale(.5);
      }
      .border-top::before,
      .border-bottom::before,
      .border-topbottom::before,
      .border-topbottom::after,
      .border-topleft::before,
      .border-rightbottom::after,
      .border-topright::before,
      .border-bottomleft::before {
          transform: scaleY(.5);
      }
      .border-right::before,
      .border-left::before,
      .border-rightleft::before,
      .border-rightleft::after,
      .border-topleft::after,
      .border-rightbottom::before,
      .border-topright::after,
      .border-bottomleft::after {
          transform: scaleX(.5);
      }
  }
  @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
      .border::before {
          width: 300%;
          height: 300%;
          transform: scale(.33333);
      }
      .border-top::before,
      .border-bottom::before,
      .border-topbottom::before,
      .border-topbottom::after,
      .border-topleft::before,
      .border-rightbottom::after,
      .border-topright::before,
      .border-bottomleft::before {
          transform: scaleY(.33333);
      }
      .border-right::before,
      .border-left::before,
      .border-rightleft::before,
      .border-rightleft::after,
      .border-topleft::after,
      .border-rightbottom::before,
      .border-topright::after,
      .border-bottomleft::after {
          transform: scaleX(.33333);
      }
  }
  
  

四. 解决某些设备上或浏览器上 300 毫米 click 点击延迟问题

1. 项目中安装 fastclick 依赖包：
   npm install fastclick --save
2. main.js 中引入安装的 fastclick

   import fastClick from 'fastclick'
   fastClick.attach((document.body))