CSS樣式等比縮放div是網頁設計與開發過程中經常用到的一項技術，它可以幫助我們在響應式布局時更好地調整頁面的排版和美觀。下面介紹一下如何使用CSS樣式等比縮放div。

div{
width: 200px;
height: 200px;
background-color: red;
}

上面的代碼表示一個紅色的正方形div，它的寬度和高度都為200像素。如果我們想讓這個div在不同的屏幕尺寸下自適應縮放，可以使用以下代碼：

/* 以寬度為基準 */
.container{
width: 70%;
}
.resizable{
width: 100%;
height: auto;
}
/* 以高度為基準 */
.container{
height: 200px;
}
.resizable{
height: 100%;
width: auto;
}

代碼中，我們把div包裹在一個容器中（class為container），然后對容器設置一個寬度或高度，以此作為等比縮放時的參照值。容器中的div使用一個class（resizable），通過設置寬度或高度為100%，讓其等比縮放到父級容器的寬度或高度。

根據實際情況，可以選擇以寬度或高度為基準進行等比縮放。并且，我們也可以結合媒體查詢等技術，分別設置不同屏幕尺寸下的縮放比例，從而實現更加精細的響應式布局效果。具體代碼如下：

@media screen and (max-width: 768px){
.container{
width: 90%;
}
.resizable{
width: 100%;
height: auto;
}
}
@media screen and (max-width: 480px){
.container{
width: 100%;
}
.resizable{
width: 100%;
height: auto;
}
}

以上代碼表示在屏幕寬度在768像素以下時，容器設置為寬度為90%；在屏幕寬度在480像素以下時，容器設置為寬度為100%。對于容器中的div，每次都設置寬度為100%，實現等比縮放效果。

以上就是使用CSS樣式等比縮放div的方法，希望對大家有所幫助。