CSS是前端設計中必不可少的一部分。設計師除了要實現美觀的外觀，還需要考慮如何讓頁面在不同設備上呈現統一和穩定的外觀。確保頁面在不同瀏覽器和設備上顯示正常是一個具有挑戰性的任務，尤其是對于那些設計復雜度高的網站。

在CSS中，我們通常使用百分比或者em單位來定義元素的高度和寬度。這種方式對于確保頁面的自適應布局非常有用，但也可能會導致元素的形狀扭曲和變形。

div {
width: 50%;
height: 50%;
background: #eee;
}

上面的CSS代碼會讓div元素的寬和高都等于父元素的50%，這樣的效果看起來很好。但是如果我們把這段代碼應用在一個寬高比例不為1:1的元素上，元素就會伸縮不均，形狀也發生扭曲。比如下面的代碼會把一個長方形的div元素變成一個正方形：

<div style="width:200px;height:100px;"></div>
<style>
div {
width: 50%;
height: 50%;
background: #eee;
}
</style>

為了防止元素變形，我們可以使用以下技巧：

1. 使用max-width和max-height代替width和height：

div {
max-width: 50%;
max-height: 50%;
background: #eee;
}

2. 使用padding屬性代替width和height：

div {
background: #eee;
padding: 25% 50%;
}

3. 使用CSS3的aspect-ratio屬性：

div {
background: #eee;
width: 50%;
aspect-ratio: 1 / 1;
}

無論使用哪種方法，都應該測試各種不同大小和寬高比的元素，確保頁面正常顯示。