首頁 > 部落格目錄 > 如何讓網頁的圖片文字在桌機與手機中最適化，一組CSS就可以實現

如何讓網頁的圖片文字在桌機與手機中最適化，一組CSS就可以實現

RWD, Mobile, CSS, Screen

Written by Wanding on 6 June 2022

在桌機和筆電，通常橫式的圖片很適合；但是換成在手機呈現效果，直式的圖片看起來將會更精彩。

在網頁上新增任何內容，要符合不同的螢幕長寬比例的呈現，增加了網頁建置的複雜和困難。在桌機看似乎一切都還好，當改用手機瀏覽手機時，卻發現比例完全不對。新手面對這樣的情境，常常不知所措，也會對網頁的工作望之卻步。

其實，這一點都不難。今天來介紹這簡單的方法，【一技讓網頁照片文字在桌機和手機大不同】。

一. 了解螢幕的規格分佈，定義分界點

種類	非常小	小	中	大	特大
螢幕寬度	<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 橫式的蜂鳥圖片，在筆電或桌機會呈現出來，換成手機則隱藏。

on desktop

hummingbird2.jpg 直式的蜂鳥圖片，在筆電或桌機會隱藏起來，換成手機則出現。

on mobile

五. 小結

藉由這兩支CSS，可以很輕易的做桌機和手機擁有不同的呈現，例如圖片的橫式和直式、桌機的字體比較大手機的字體比較小、不同的icon呈現....等等。您都可以順利的控制它們。

這個技巧並不難，如果你能夠把它學起來，對於大小不同的螢幕的控制，您將會變得遊刃有餘!

返回目錄

首頁 > 部落格目錄 > 如何讓網頁的圖片文字在桌機與手機中最適化，一組CSS就可以實現