18-11-05-优快云博客

本文探讨了移动端页面在特定情况下触发resize事件的问题及解决方案，同时深入分析了Vue项目中Vuex getter变动监听的常见误区与正确实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记一次移动端莫名其妙触发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;
}
复制代码

炫酷粒子效果

juejin.im/post/5bdfe1…

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*/
  ...
}
复制代码