如何讓網頁的圖片文字在桌機與手機中最適化，一組CSS就可以實現
如何讓網頁的圖片文字在桌機與手機中最適化，一組CSS就可以實現
在桌機和筆電，通常橫式的圖片很適合；但是換成在手機呈現效果，直式的圖片看起來將會更精彩。
在網頁上新增任何內容，要符合不同的螢幕長寬比例的呈現，增加了網頁建置的複雜和困難。在桌機看似乎一切都還好，當改用手機瀏覽手機時，卻發現比例完全不對。新手面對這樣的情境，常常不知所措，也會對網頁的工作望之卻步。
其實，這一點都不難。今天來介紹這簡單的方法，【一技讓網頁照片文字在桌機和手機大不同】。
一. 了解螢幕的規格分佈，定義分界點
| 種類 | 非常小 | 小 | 中 | 大 | 特大 |
| 螢幕寬度 | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
| 對應設備 | 手機 | PAD | iPAD | 筆電 | 桌機 |
找出轉換的分界點，例如我把筆電和桌機定為第一類， IPad和各式規格的手機就定為第二類，那麼我們就把分界點訂在991px。
接下來我們要做到以下的功能 : 在992px以上的螢幕寬度呈現橫式的照片，而在991px以下的螢幕寬度呈現直式的照片。
二. 找出控制網站的CSS檔
如果你第一次聽到CSS，請參考這篇文章 【CSS是什麼?】
如果你不知道怎麼使用CSS，請參考這篇文章 【如何開始使用CSS?】
找出你的網站所連結的CSS檔案，從下列原始碼就可以找出網站連結的系列CSS檔案是style.css
<head>
<link rel="stylesheet" type="text/css" href="website url/css/style.css">
</head>
三. 新增兩個CSS class
如果你不知道什麼叫做class，請參考這篇文章 【CSS是什麼?】
然後在style.css檔案中，新增下列二個class
第一支稱為display-in-mobile
@media (min-width:991px) {
.display-in-mobile {
display: none;
}
}
第二支稱為display-in-desktop
@media (max-width:991px) {
.display-in-desktop {
display: none;
}
}
四. 使用這兩個CSS class，控制桌機和手機的呈現
實例說明
以文章內的這兩張蜂鳥的圖片，我們要做到網頁圖片在桌機呈現橫式；當使用手機瀏覽自動轉換成直式。
寫法如下
<img src="/img/hummingbird1.jpg" alt="" class="dispaly-in-desktop"> <img src="/img/hummingbird2.jpg" alt="" class="dispaly-in-mobile">
僅僅這兩行，就可以完成桌機圖片和手機圖片的自動轉換。
hummingbird1.jpg 橫式的蜂鳥圖片，在筆電或桌機會呈現出來，換成手機則隱藏。
hummingbird2.jpg 直式的蜂鳥圖片，在筆電或桌機會隱藏起來，換成手機則出現。
五. 小結
藉由這兩支CSS，可以很輕易的做桌機和手機擁有不同的呈現，例如圖片的橫式和直式、桌機的字體比較大手機的字體比較小、不同的icon呈現....等等。您都可以順利的控制它們。
這個技巧並不難，如果你能夠把它學起來，對於大小不同的螢幕的控制，您將會變得遊刃有餘!