在現代社會中，人們日常使用的設備越來越多樣化，其中手機已經成為許多人日常工作、娛樂的不可缺少的工具。因此，越來越多的網站需要通過響應式設計來支持移動設備的訪問。在編寫響應式網站時，CSS是不可或缺的一部分。然而，我們也需要注意讓CSS只用于手機端。

在響應式設計中，我們通常通過媒體查詢來檢測不同的屏幕大小，以此應用不同的樣式。在這里，我們可以使用CSS的隱藏屬性（如display:none）來隱藏不需要的元素。然而，這些被隱藏的元素仍然會被瀏覽器加載和渲染，這對于移動設備的性能和用戶體驗都造成了負面影響。

為了只讓CSS應用于手機端，我們可以通過meta標簽中的viewport屬性來指定頁面的寬度，并在媒體查詢中使用min-width和max-width來檢測屏幕大小。在移動設備上，我們可以設置頁面的寬度與設備寬度相同。這將確保在不同尺寸的設備上，CSS只應用于相應的視圖。

在上面的代碼中，我們使用了@media查詢來檢測屏幕寬度是否在375px至767px之間。對于移動設備，這將應用.mobile-only類中的樣式，并隱藏.desktop-only類中的元素。對于桌面設備，這些樣式將被忽略，因為屏幕寬度超過了767像素。

在進行響應式設計時，我們需要確保CSS只被應用于相應的設備，以提高移動設備的性能和用戶體驗。通過使用meta標簽和媒體查詢，我們可以輕松地使CSS只被應用于手機端。