结伴游项目（关于响应式及全局样式）

2018-05-12

因为要做响应式布局，所以使用的是element的栅栏式布局。

关于栅栏式布局，官方文档给了使用方法，我只使用了xs（手机端）和sm（非手机端，主要就是pc），需要注意的是可以传入一个对象，如：

<el-col :sm={span:3,offset:4} :xs="5">
    <el-button type="warning" plain>发表</el-button>
</el-col>

为了手机端看上去也是一样的，所以在全局样式中也使用了媒体查询，使用方法如下：

@media only screen and (max-width: 767px) {
   html {
     font-size: 12.5px;
   }//这个是使手机端的字体小一点避免溢出盒子
   .el-dialog , .el-message-box  {
     width:80%
   }
   .el-message{
     min-width:200px
   }//这个是让弹出框在手机端可以适应
 }

还有全局样式的初始化，包括初始化样式和常用的类（在base.css里声明之后在各个vue里就可以直接引用类而不用在style里声明），我将所有的全局样式都放在了assets文件夹下的css文件夹里，取名base.css，在main.js文件里引入即可。全局初始化样式如下：

@charset "UTF-8";
/* base */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
    font-family:sans-serif,"\5FAE\8F6F\96C5\9ED1",arial;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    position: relative;
  }

  ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  div, p, dl, dt, dd {
    margin: 0;
    padding: 0;
  }
  li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
p,
blockquote,
figure,
form,
fieldset,
input,
legend,
pre,
abbr,
button {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
pre,
code,
address,
caption,
th,
figcaption {
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}

fieldset,
iframe,
img {
  border: 0;
}

caption,
th {
  text-align: left;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
article,
aside,
footer,
header,
nav,
main,
section,
summary,
details,
hgroup,
figure,
figcaption {
  display: block;
}
audio,
canvas,
video,
progress {
  display: inline-block;
  vertical-align: baseline;
}
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  a:active,
  a:hover {
    outline: 0;
  }
  :focus {
    outline: none;
  }
  b,
strong {
  font-weight: bold;
}
a {
    -webkit-transition: color .3s ease-out;
    transition: color .3s ease-out;
  }

/*  a:hover {
    color: #e2bf20;
    -webkit-transition: color .3s ease-out;
    transition: color .3s ease-out;
  }
*/
  body{
    background: #efefef;
  }

  .fixed{
    width: 100%;
    position: fixed;
    z-index:99;
}
.word-center{
  text-align: center;
}
.word-right{
  text-align: right;
}
.word-left{
  text-align: left;
}
  @media only screen and (max-width: 767px) {
    html {
      font-size: 12.5px;
    }
  }