<div不適配（div not responsive）是指在網頁設計中，<div>元素的大小和位置無法適應各種不同設備的屏幕尺寸和方向。這導致網頁在不同設備上顯示的效果不一致，甚至會出現錯位、溢出或者無法正常顯示的問題。以下幾個代碼案例將詳細解釋說明<div不適配的問題，并提供一些解決方法。
案例一：

html
<p>在移動設備上顯示的網頁</p>
<pre>
<div style="width:500px;height:300px;background-color:#FF0000;"></div>

在桌面設備上顯示的網頁

<div style="width:1000px;height:600px;background-color:#FF0000;"></div>

在上述案例中，<div>元素設置了固定的寬度和高度。在移動設備上，由于屏幕尺寸較小，<div>元素的寬度和高度過大，導致其內容超出了屏幕顯示范圍。而在桌面設備上，<div>元素的寬度和高度適應了較大的屏幕尺寸，但是在顯示時會出現過多的空白區域。
為了解決<div不適配的問題，可以使用CSS媒體查詢（CSS media query）技術來根據不同設備的屏幕尺寸和方向，動態調整<div>元素的大小和位置。例如：

html
<pre>
<style>
@media screen and (max-width: 500px) {
div {
width: 100%;
height: auto;
background-color: #FF0000;
}
}
<br>
@media screen and (min-width: 501px) {
div {
width: 50%;
height: 400px;
background-color: #FF0000;
}
}
</style>
<div></div>

在上述代碼中，使用了@media查詢來指定在不同屏幕寬度下<div>元素的樣式。當屏幕寬度小于或等于500像素時，<div>元素的寬度為100%（自適應屏幕寬度），高度自適應并根據內容進行調整。而當屏幕寬度大于501像素時，<div>元素的寬度為50%，高度設置為400像素。
通過以上的解釋和代碼案例，可以看出<div不適配的問題以及如何使用CSS媒體查詢來解決這個問題。在網頁設計中，應盡量避免使用固定的寬度和高度來布局，而是根據不同設備的屏幕尺寸來動態調整元素的大小和位置，以確保網頁在各種設備上都能夠正常顯示。