CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
  由於現在行動裝置愈來愈普及,人手已經好幾隻,一個人可能同時擁有手機與平板,同時也改變了整個生活形態,慢慢的習慣直接透過,智慧型手機或平板來找資料,因此這也提高了手機版網頁的需求,而一般在製作手機版網頁,大至有二種方式,一種用導網頁的方式,當偵測到手機瀏覽時,頁面就自動切換成手機模式,而另一種模式,則是會隨著解晰度的不同,來調整網頁的版型,以符合該解晰下瀏覽,而這種模式就叫作Responsive,也就是大家常說的自適版型,由於現在行動裝置這麼多,要如何知道各裝置的解晰呢?這時不妨可到nmsdvid.com網站中查看,在該網站直接提供各裝置的media screen code,因此只要直接複製就可使用囉!

行動裝置Media Screen:
網站名稱:Media Query Snippets
網站網址:http://nmsdvid.com/snippets/

進到網站中,從右上角的頁籤中,可切換各裝置類型,像是手機、平板、螢幕...等。
梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
只要點一下裝置名稱,下方就會出現media screen的code,再將框框中的code給複製起來。
梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
接著插入的方式有二種,一種是用連結外部檔案的方式,另一種是直接寫在網頁中。
梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
由於梅干是iPhone3Gs,所以複製iPhone 3Gs的Code,簡單的來作個示範,當使用桌機時,會看到藍色背景,手機則會出現紅色背景。
梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
馬上來瀏覽看看,哈~可看到當用桌機時,背景會呈現藍色,並出現電腦版的文字,由於該網站是用裝置的長寬來作判斷,因此即便將桌機的視窗縮小,也不會切換成行動裝置的頁面。
梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
當用手機瀏覽時,背景則會變成紅的,並出現手機版的文字,是不是超ez的呀。
梅問題-Responsive Web Design網頁自適版型Media Queries參考一覽表
  其實無論是用導網頁,還是用自適版型,唯一的目地就是讓使用行動裝置的朋友,可以不用再用二指來縮放版面,直接就可瀏覽網頁,而自適版型與導網頁,最大的不同點就在於,自適版型在製作時,需要花點時間,好好的規畫網站架構,以及css的code會比較多,而最大好處就是,不用再透過任何程式來作判斷,直接用CSS就可即時改變瀏覽的版型,來符合各行動裝置的螢幕解析來瀏覽。

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    說道:

    請問梅老師,flex做的網站可以做出手機板的嗎?

    回應:
    手機不支援flash喔!!
  • 第1梅
    Quni 說道:

    很方便又實用 謝謝