CSS手機端媒體查詢就是基於不同的設備屏幕大小及解析度為投影設計選擇合適的CSS，實現響應式網頁設計。將不同的CSS代碼用媒體查詢技術區分出不同的設備代碼，實現在同一個HTML網頁中，不同的設備訪問，可以獨立調整網頁的外觀和版式。

@media screen and (max-width: 768px){
/* 在屏幕寬度小於768px的情況下，應用以下樣式 */
body{
background-color: #fff;
color: #000;
}
 }
 @media screen and (min-width: 769px){
/* 在屏幕寬度大於768px的情況下，應用以下樣式 */
body{
background-color: #000;
color: #fff;
}
 }

如上所示的CSS代碼是一個常見的手機端媒體查詢，在屏幕寬度小於768px時，應用第一個樣式，也就是顯示白色背景和黑色字體，而在屏幕寬度大於等於768px時，應用第二個樣式，顯示黑色背景和白色字體，使網頁自適應不同設備屏幕大小。

在手機端媒體查詢中，還可以搭配使用像rem、vw、vh等CSS屬性，使網頁更加自適應，例如：

@media screen and (max-width: 768px){
/* 在屏幕寬度小於768px的情況下，應用以下樣式 */
body{
font-size: 16px;
}
 }
 @media screen and (min-width: 769px){
/* 在屏幕寬度大於768px的情況下，應用以下樣式 */
body{
font-size: 18px;
}
 }

上面的代碼中，我們使用了font-size屬性，當屏幕寬度小於768px時，字體大小設為16px，而當屏幕寬度大於等於768px時，字體大小設為18px，從而讓網頁字體大小進行自適應，更加符合用戶體驗。

總的來說，CSS手機端媒體查詢可以提高網頁的自適應性，在不同的設備上提供更好的用戶體驗，是設計響應式網頁的重要技術之一。