这里基于Vue实现
在 if (screenWidth <= 575) 内对你的 javascript代码 或data内属性进行修改 ,可搭配媒体查询联合使用
注意: 下面代码会实时监听你的屏幕宽度当你的屏幕宽度
优点: 实时监听 不需要加载网页后才能触发生效,当你将你的屏幕宽度缩小时就能监听到
<script>
export default {
data() {
return {
isCollapse: false
};
},
mounted() {
window.addEventListener('resize', this.handleResize);
this.handleResize(); // 初始执行一次回调函数
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
// 获取屏幕宽度
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
// 检查屏幕宽度是否小于等于575px
if (screenWidth <= 575) {
this.isCollapse = true;
} else {
this.isCollapse = false;
}
}
}
};
</script>