如何讓網頁的圖片文字在桌機與手機中最適化,一組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呈現....等等。您都可以順利的控制它們。
這個技巧並不難,如果你能夠把它學起來,對於大小不同的螢幕的控制,您將會變得遊刃有餘!
如何讓網頁的圖片文字在桌機與手機中最適化,一組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呈現....等等。您都可以順利的控制它們。
這個技巧並不難,如果你能夠把它學起來,對於大小不同的螢幕的控制,您將會變得遊刃有餘!