在進(jìn)行移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，我們需要考慮到不同設(shè)備之間屏幕尺寸的差異，因此需要采用響應(yīng)式設(shè)計(jì)方案，在不同設(shè)備上顯示完美的網(wǎng)頁(yè)效果。而CSS3提供的媒體查詢(xún)（Media Queries）就是實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的重要方式之一。

在使用媒體查詢(xún)時(shí)，我們需要寫(xiě)出需要在特定設(shè)備上生效的CSS樣式代碼。下面介紹一些常用的CSS在移動(dòng)端才生效的方式。

@media only screen and (max-width: 768px){
/*在小于等于768px屏幕尺寸時(shí)，以下CSS樣式生效*/
body{
background-color: #f5f5f5;
}
}

上述代碼中，媒體查詢(xún)中使用了only screen，表示只在屏幕上生效，而不在其他媒介上，比如打印機(jī)等。同時(shí)，設(shè)定了屏幕尺寸小于等于768px時(shí)，內(nèi)部樣式才生效，這就是一個(gè)基本的移動(dòng)端適配方案。

@media only screen and (max-device-width: 480px){
/*在小于等于480px設(shè)備屏幕尺寸時(shí)，以下CSS樣式生效*/
.header{
display: none;
}
}

上述代碼中，使用max-device-width代替了max-width，表示設(shè)備屏幕的物理寬度，包括瀏覽器中的地址欄等。同時(shí)，隱藏了.header這個(gè)元素，可以實(shí)現(xiàn)一些簡(jiǎn)單的頁(yè)面結(jié)構(gòu)調(diào)整。

當(dāng)然，還有其它一些常用的CSS在移動(dòng)端才生效的方式，比如使用rem、viewport等，具體根據(jù)不同需求使用。通過(guò)媒體查詢(xún)的靈活運(yùn)用，可以方便地實(shí)現(xiàn)在不同終端設(shè)備下的網(wǎng)頁(yè)展示效果，提升用戶(hù)的體驗(yàn)。