vue项目中的细节点

一.meta标签的使用

在创建项目时，我们会写到以下标签内容：

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

那么这个标签是什么意思呢？
1. name="viewport:"

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的
Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport
的大小和缩放，其他手机浏览器也基本支持。

2. content属性值 :
width: 可视区域的宽度，值可为数字或关键词device-width
height: 同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0:可视区域的缩放级别
maximum-scale:用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

二.重置页面样式表reset.css

1. 使用原因：
主要是因为html标签在浏览器中都有各自的默认样式，在不同浏览器下会有差别，不同手机初始化样式做统一，引入了reset.css,其实就是“覆盖”浏览器的CSS默认属性
2. 代码附上：

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
h1,h2,h3,h4,h5,h6,em,i {
    font-weight: 100;
    font-style: normal
}
ul,ol,li {
    list-style-type: none
}
a {
    color: #666;
    text-decoration: none;
    outline: 0
}
a:hover {
    text-decoration: none
}

三.移动端1像素边框问题border.css

1.什么是移动端1像素问题？
主要原因是css像素与物理像素的区别，css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，可以反应css中的像素与设备的像素比。devicePixelRatio = 物理像素 / 独立像素。
2.代码附上

@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);
  }
}

四.click事件300ms延迟问题

1. 什么是click事件300ms延迟问题？
当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。于是，300 毫秒延迟就这么诞生了
2. 解决方法：
（1）cmd执行npm install fastclick --save
（会存放在package.json的dependencies）
（2）编写以下代码

import fastClick from 'fastclick'
...
...
fastClick.attach(document.body);///   300ms延时问题

五.stylus写样式

1. 安装依赖包：
cmd下执行：

npm install stylus --save
npm install stylus-loader --save

2.在代码中使用

<style lang="stylus" scoped>
...
</style>

scoped：表示样式只对当前组件有效，不会对其他产生影响（局部化样式）
lang="stylus"使用其写样式