CSS百分比用于網頁布局時很常見，它可以讓元素根據父元素的大小而自適應調整自己的大小。但是，在一些情況下，CSS百分比并不能實現自適應效果，下面我們來詳細探討這個問題。

以下是一段示例代碼：
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
width: 500px;
height: 500px;
}
.child {
width: 50%;
height: 50%;
background-color: red;
}
</style>
在這段代碼中，我們的想法很簡單，就是讓子元素的寬度和高度都是父元素的一半，這樣就可以實現自適應效果。但是，當我們在瀏覽器中查看效果時，卻發現子元素的大小并沒有按照我們預期的那樣調整。

這是為什么呢？其實，問題的本質在于CSS百分比是相對于父元素的大小來計算的，而在本例中，父元素的大小是固定的，所以子元素的大小也是固定的，無法實現自適應的效果。

那么，如何解決這個問題呢？有兩個比較常見的解決方案：

1. 使用viewport單位，如vh和vw。

viewport單位是相對于視口大小來計算的，所以可以實現自適應效果。

2. 使用JavaScript動態計算大小。

通過JavaScript獲取父元素的大小，然后動態計算子元素的大小，也可以實現自適應效果。

總之，CSS百分比并不是萬能的，需要在實際應用中根據情況進行選擇與靈活運用。