移动端项目前配置

238 阅读1分钟

公共样式

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();