現在，我們的生活離不開電腦和手機。而作為網站開發者，我們需要確保我們的網站能夠適用于所有設備，包括電腦和手機。使用CSS來實現這一目標是一個很好的選擇。在這篇文章中，我們將會學習一些可以適用于電腦和手機的CSS代碼。

/* 設置整個頁面的字體 */
body {
font-family: Arial, sans-serif;
}
/* 設置標題的樣式 */
h1, h2, h3 {
font-weight: bold;
margin-bottom: 10px;
}
/* 設置段落的樣式 */
p {
font-size: 16px;
line-height: 1.5;
}
/* 設置鏈接的樣式 */
a {
color: blue;
text-decoration: none;
}
/* 設置按鈕的樣式 */
button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: blue;
color: #fff;
border-radius: 5px;
}
/* 設置圖片的寬度 */
img {
max-width: 100%;
height: auto;
}

上面的代碼展示了如何設置頁面元素的樣式，以便在電腦和手機上都有很好的顯示效果。例如，使用非特異性字體設置整個頁面的字體，使用簡單的顏色和樣式設置鏈接和按鈕，使用響應式圖片設置圖片的寬度。這些代碼既簡單又易于閱讀，并且可以適用于不同的設備。

為了確保頁面達到最佳效果，我們還可以使用媒體查詢來針對不同的設備設置不同的樣式。例如：

/* 設置在手機上的樣式 */
@media all and (max-width: 480px) {
body {
font-size: 14px;
}
h1, h2, h3 {
font-size: 20px;
}
button {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
}
}

上面的代碼展示了如何使用媒體查詢來為手機設置不同的樣式。我們可以通過使用CSS的@media關鍵字，并針對min-width和max-width設置不同的樣式，來實現我們的設備適配。例如，當瀏覽器寬度小于480px時，將會應用上面的樣式。

總之，通過使用CSS，我們可以為電腦和手機設置適合的樣式，使我們的網站能夠在所有設備上都能有很好的顯示效果。