CSS如何監聽父元素寬度？

CSS的一個重要功能是布局，而布局需要知道元素所在的父元素的寬度。那么，如何在CSS中監聽父元素的寬度呢？

答案是使用CSS的@media查詢和calc()函數。

首先，我們來看一下@media查詢。該查詢可以根據不同的媒體類型和條件，來應用不同的CSS規則。在這里，我們可以使用它來針對父元素的寬度進行監聽。

@media (max-width: 800px) {
/* 在父元素寬度小于800px時應用這里的CSS規則 */
}

通過設置max-width，我們可以在父元素寬度小于800px時應用特定的CSS規則。

接下來，我們來看一下calc()函數。該函數可以用于計算數值，是一個十分實用的CSS函數。在這里，我們可以使用它來計算父元素的寬度。

.child-element {
width: calc(100% - 20px);
}

通過設置子元素寬度為100%減去一定數值來計算父元素的寬度。這樣，當父元素的寬度變化時，子元素的寬度也會按照相應的比例改變。

上述方法可以使CSS監聽父元素的寬度，從而實現動態布局。