如今，隨著移動設備的普及，我們編寫網頁時需要考慮適配不同尺寸的屏幕，以及不同的設備類型。這時 CSS 適配手機和電腦就成為我們必須掌握的技能之一。

一般而言，我們可以使用響應式布局來實現這樣的效果。首先，我們需要在 head 標簽中添加 meta 標簽，來讓瀏覽器知道該頁面需要在不同設備上展示的樣式。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這里的 width=device-width 表示將頁面的寬度設定為實際設備的寬度，而 initial-scale=1.0 表示初始縮放比例為 1。

接下來，我們可以使用媒體查詢（media query）來適配不同分辨率的設備。媒體查詢可以根據屏幕大小或設備類型（如手機、平板電腦和臺式機）等特性，來指定相應的 CSS 樣式。

@media (max-width: 767px) {
/* 這里是在屏幕寬度小于 767px 時的 CSS 樣式 */
}
@media (min-width: 768px) and (max-width: 991px) {
/* 這里是在屏幕寬度在 768px 和 991px 之間時的 CSS 樣式 */
}
@media (min-width: 992px) {
/* 這里是在屏幕寬度大于等于 992px 時的 CSS 樣式 */
}

在使用媒體查詢時，我們可以設置不同的 CSS 屬性，例如字體大小、行高、元素排列方式等。這樣，我們就可以實現在不同設備上展示不同的頁面樣式。

總之，css 適配手機和電腦是 Web 前端開發的重要技能之一，以此為基礎可以實現各種不同的樣式效果，提高網頁的用戶體驗。