中位CSS是一種讓設(shè)計師和開發(fā)者可以更加便捷地實(shí)現(xiàn)響應(yīng)式設(shè)計的CSS方法。

基本原理是在CSS樣式表中使用中位尺寸，而不是具體像素值。這樣可以在不同設(shè)備上實(shí)現(xiàn)不同的布局，而不需要對每個設(shè)備編寫不同的CSS。

/* 使用中位CSS的代碼片段 */
.container {
width: 80%;
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 768px) {
.container {
width: 90%;
max-width: 720px;
}
}
@media (max-width: 480px) {
.container {
width: 95%;
max-width: 480px;
}
}

上述代碼片段是一個使用中位CSS的基本示例。在這個示例中，容器的寬度是80%，但最大寬度是960像素。這意味著，如果設(shè)備的屏幕寬度超過960像素，容器將顯示在屏幕中央，而不是占據(jù)整個屏幕。

隨著屏幕尺寸變小，媒體查詢生效并覆蓋了原來的樣式。這意味著，當(dāng)屏幕寬度為768像素或更小時，容器寬度將變?yōu)?0%，最大寬度為720像素。

當(dāng)設(shè)備寬度為480像素或更小時，容器寬度將再次變化，變?yōu)?5%的寬度，最大寬度為480像素。這種方式可以在任何設(shè)備上創(chuàng)建響應(yīng)式設(shè)計，而不需要編寫不同的CSS樣式表。