记一次移动端莫名其妙触发resize
因为手机自带浏览器页眉的原因，最开始显示页眉，但是下拉的时候，会自动隐藏，上拉，会出现，隐藏和出现都会触发
window的resize
解决: 做判断，当height改变200以内的时候，不执行resize的回调函数
记一次watch不到vuex的getter变动
//vuex
...
getters:{
height :(state) => () => {
return state.height;
},
width :(state) => () => {
return state.width;
},
}
...
//vue
computed: {
WIDTH: function(){
return this.$store.getter.width;
//正确: return this.$store.getter.width()
//因为getter返回的是个函数，width是函数的返回值
//这里watch的是函数，而不是函数的返回值
} ,
},
watch: {
WIDTH: function(){
this.resize();
}
}
...
媒体查询
针对不同媒体引入不同css
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
css语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
炫酷粒子效果
postcss-px2view 改造，让它忽略媒体查询中的px
//找到目录下的index.js
css.walkDecls(function (decl, i) {
//判断，当节点的父节点的名字为media时，忽略这个节点
if(decl.parent.parent && decl.parent.parent.name=== 'media') return;
if (decl.value.indexOf('px') === -1) return;
if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;
decl.value = decl.value.replace(pxRegex, pxReplace);
});
//style中，第一个节点是/*ignore*/的媒体查询块会被忽略
@media screen and (min-width: 500px) {
/*ignore*/
...
}
