分類彙整: RWD 響應式網頁

RWD 網頁設計全名 Responsive web design 響應式網頁設計,自從 Ethan Marcotte 提出RWD 網頁設計之後,google 也開始重視行動版的網頁搜尋優先,現在 RWD 網頁設計是相當重要的。

RWD 教學 CSS3 Media Queries 媒體查詢

隨著現今行動裝置的多樣化,各家廠商的智慧型手機、平板電腦推陳出新!手機的螢幕尺寸一家做得比一家大、平板電腦的螢幕尺寸也是大小不一,尺寸多樣,於是讓特定的螢幕尺寸來切換 CSS3 的 Media Queries 的需求性就產生了…. 閱讀全文

in CSS 教學 - 網頁排版, RWD 響應式網頁

教學:Sublime Text 的安裝設定及入門操作 – [ 上篇 ]

sublime_download

相較於普遍多人初學網頁時,會選擇使用 Dreamweaver ,而 Sublime Text 最大的優勢就是它有著大量實用的外掛程式,每個人可以根據自己使用上的需求,安裝其所需的外掛,讓這套軟體更為完備且能發揮更大的功效。所以,只要能夠善用擴充套件的功能,其實 sublime Text 是個可以大大提高網頁建置效率的好工具喔… 閱讀全文

in CSS 教學 - 網頁排版, Dreamweaver 網頁設計, Free Resource 好康報報, JavaScript 程式設計, RWD 響應式網頁

教學:Sublime Text 的安裝設定及入門操作 – [ 下篇 ]

sublime text-install package

不知道大家還記得上一回做的 Sublime Text 基本下載與安裝嗎?這次我們要延續上一次的進度,也就是已安裝好的「 package control 」套件,現在就要利用它,來進行其他外掛的安裝作業… 閱讀全文

in CSS 教學 - 網頁排版, Dreamweaver 網頁設計, Free Resource 好康報報, JavaScript 程式設計, RWD 響應式網頁

修正 iPhone 手機旋轉後畫面會放大的問題

續前篇 使用 Veiwport 對於行動裝置的影響 所衍生出來的問題。完成了設定 width=device-width 使各廠牌手機的可視寬度與整個頁面寬度相同固然可喜可賀,看起來很正常,沒有什麼異狀呀!也達到我們想要讓使用者看到的結果。(如下圖所示) 閱讀全文

in RWD 響應式網頁

使用 Veiwport 設定手機網頁的螢幕解析度

使用智慧型手機上網的人口數日益增加,家家戶戶對於手機網頁 Mobile Web 的設計需求也就越來越多了,在開始設計手機網頁時,第一件事情就是要設定 viewport 調整手機瀏覽器的螢幕解析度 閱讀全文

in RWD 響應式網頁