vue中引入初始化样式reset.css和自适应rem.js

1.在相关目录中创建好文件
2.在main.js中引入

import ‘./common/rem’
import ‘./style/reset.css’
// 即完成,设置已生效

附录:
a. 常用rem设置

<script>
onload = function () {
  setHTML()
  onresize = function () {
    setHTML()
  }

  function setHTML() {
    let baseVal = 100
    let pageWidth = 375
    let maxFontSize = 200
    let screenWidth = document.querySelector('html').offsetWidth
    let fontsize = screenWidth * baseVal / pageWidth
    if (fontsize > maxFontSize) {
      fontsize = maxFontSize
    }
    document.querySelector('html').style.fontSize = fontsize + 'px'
  }
}
</script>

b. 常用reset.css设置

html {
  overflow-x: auto;
  overflow-y: scroll;
}

html,
body {
  height: 100%;
}

body,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td {
  padding: 0;
  margin: 0;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-align: left;
  background-color: #fff;
}

select {
  font-size: 12px;
}

table {
  border-collapse: collapse;
}

fieldset,
img {
  border: 0 none;
}

fieldset {
  padding: 0;
  margin: 0;
}

fieldset p {
  padding: 0 0 0 8px;
  margin: 0;
}

legend {
  display: none;
}

address,
caption,
em,
strong,
th,
i {
  font-style: normal;
  font-weight: 400;
}

caption,
th {
  text-align: left;
}

table caption {
  margin-left: -1px;
}

hr {
  height: 2px;
  margin: 5px 0;
  overflow: hidden;
  clear: both;
  border-width: 1px 0;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #fff;
}

ol,
ul {
  list-style: none outside none;
}

q::before,
q::after,
blockquote::before,
blockquote::after {
  content: '';
}

a {
  color: inherit;
  text-decoration: none;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。