公共样式
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: 0.25rem;
vertical-align:baseline;
background:transparent;
box-sizing:border-box;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:0.25rem;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
* main.js里面引入
import "./assets/reset.css"
sass配置
1、下载依赖包
cnpm install node-sass sass-loader@7.3.1 -s
2、build文件中打开webpack.base.config.js在rules里面加上以下配置
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
3. 使用
<style scoped lang="scss">
</style>
rem布局
export default function(){
function setRemUnit(){
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 +'px'
}
setRemUnit();
//reset rem unit on page resize
window.addEventListener('resize',setRemUnit)
window.addEventListener('pageshow',function(e){
if(e.persisted){
setRemUnit()
}
})
//禁止双击放大
document.documentElement.addEventListener('touchstart',function(event) {
if(event.touches.length > 1) {
event.preventDefault();
}
},false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touched',function(event) {
var now = Date.now();
if (now - lastTouchEnd <=300) {
event.preventDefault();
}
lastTouchEnd = now;
},false)
}
//main.js里引入
import rem from "./assets/rem.js"
rem();