CSS是前端開發(fā)必不可少的技術之一，可以讓我們根據(jù)用戶不同的設備、屏幕大小、瀏覽環(huán)境等等因素，來定制頁面的顯示效果。其中，@media和max-width也是很重要的概念，下面我們來了解一下。

@media是CSS3的一種語法，用于定義特定條件下應用的樣式規(guī)則，讓我們可以根據(jù)不同的設備和瀏覽器寬高設置不同的樣式。而max-width則是一個CSS屬性，用來指定元素的最大寬度。結合使用這兩個概念，我們可以讓頁面在不同的屏幕大小下，展現(xiàn)不同的樣式。

@media (max-width: 480px) {
/* 當屏幕寬度小于等于480px時，應用如下樣式 */
body {
font-size: 14px;
}
.container {
width: 90%;
}
}
@media (max-width: 768px) {
/* 當屏幕寬度小于等于768px時，應用如下樣式 */
body {
font-size: 16px;
}
.container {
width: 80%;
}
}
@media (max-width: 1024px) {
/* 當屏幕寬度小于等于1024px時，應用如下樣式 */
body {
font-size: 18px;
}
.container {
width: 70%;
}
}

上面的代碼中，我們利用了@media規(guī)則和max-width屬性，分別定義了三個不同屏幕大小下應用的樣式規(guī)則。當屏幕寬度小于等于480px時，容器的寬度為頁面寬度的90%；當寬度小于等于768px時，容器寬度為頁面寬度的80%；當寬度小于等于1024px時，容器寬度為頁面寬度的70%。

利用CSS和@media、max-width屬性，我們可以實現(xiàn)不同屏幕下的自適應布局，適配不同的設備，為用戶提供更好的瀏覽體驗。