slug: 60
title: 實時監控頁面的變化
date: 2021-03-26 14:24:00
updated: 2021-12-01 11:31:02
categories:
- 技術
tags:
- js
問題產生於需求，因為項目需要適配PC和移動端多套布局，所以某些元素在特定的寬度下會產生錯位的現象。
如果是在CSS中，可以很好的判斷，使用媒體查詢可以實時檢測頁面的寬度，從而給予標籤不同的屬性。
```css
@media (max-width:768px){
...
}
在 JS 下可以使用下面這種方法
window.addEventListener('load', function() {
window.addEventListener('resize', function() {
console.log(window.innerWidth)
var w = window.innerWidth;
...
}
})
})
具體操作的細節可以嘗試一下，還是很不錯的一個方法，同時注意 window ，因為這是個例子我就直接寫了，實際編碼中，慎用 window 事件。