CSS是我們做網站中必不可少的語言。隨著網站功能日益復雜，CSS代碼文件也越來越龐大，難以維護。這時就可以考慮將一個大的CSS文件分成多個小的CSS文件。但是問題來了，如何垂直對齊多個CSS文件的代碼呢？

/* CSS 代碼文件一 */
body {
font-size: 16px;
color: #333;
}
/* CSS 代碼文件二 */
.header {
background-color: #fff;
height: 80px;
line-height: 80px;
}
/* CSS 代碼文件三 */
.footer {
background-color: #333;
height: 60px;
line-height: 60px;
}

我們可以利用CSS的@media媒體查詢來實現多個CSS文件垂直對齊。

/* 媒體查詢，屏幕寬度大于等于768px時生效 */
@media screen and (min-width: 768px) {
/* CSS 代碼文件一 */
body {
font-size: 16px;
color: #333;
}
/* CSS 代碼文件二 */
.header {
background-color: #fff;
height: 80px;
line-height: 80px;
}
/* CSS 代碼文件三 */
.footer {
background-color: #333;
height: 60px;
line-height: 60px;
}
}

這樣在雖然多個CSS文件分開了，但是在代碼上卻是整齊對齊了。