1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

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

2013/09/16

梅問題-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就可即時改變瀏覽的版型,來符合各行動裝置的螢幕解析來瀏覽。