CSS是網頁設計中不可或缺的一部分，其中最基本的就是網頁布局。但是，隨著大屏幕、小屏幕、桌面端或移動端設備的普及，網頁布局在不同的設備上需要有不同的表現。這就是所謂的自適應布局。
自適應布局的實現離不開CSS的媒體查詢。媒體查詢是CSS3的一種基本語法，通過匹配不同媒體類型（設備屏幕大小、分辨率等），使其可以在不同場景下呈現不同的樣式。
首先，我們需要在HTML文檔中引入一個CSS文件，并在其中聲明默認的布局樣式，如下所示：
<head> <link rel="stylesheet" href="style.css"> </head>
接著，在CSS文件中，我們需要聲明多組適應不同媒體類型的樣式，如下所示：
/* 默認布局樣式 */
.container{
width: 960px;
margin: 0 auto;
}
/* 移動設備樣式 */
@media only screen and (max-width: 768px) {
.container{
width: 100%;
padding: 0 10px;
}
}
/* 平板及桌面設備樣式 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
.container{
width: 100%;
padding: 0 20px;
}
}
/* 大屏幕設備樣式 */
@media screen and (min-width: 1201px) {
.container{
width: 1140px;
}
}以上樣式代碼實現了以下布局效果：在1200px以下的移動設備上，寬度自適應于屏幕寬度，左右padding值分別為10px；在1200px至769px范圍內的平板或桌面設備上，寬度自適應于屏幕寬度，左右padding值分別為20px；在1201px以上的大屏幕設備上，寬度為固定的1140px。
綜上所述，借助CSS的媒體查詢語法，我們可以輕松地實現自適應布局，讓網頁在不同媒體類型下呈現出不同的效果。
上一篇css鼠標怎么調色
下一篇css網頁文本框變長