RWD 怎麼畫Wireframe? · 嫁給RD 的UI Designer | rwd尺寸設定
之前曾經去演講過的學校,有學生傳訊問了關於RWD設計的問題。設計師在繪製RWD網站的Wireframe時,會繪製PC和Mobile兩個版本嗎?或是直接使用軟體去做版本之間的切換呢?若是沒有軟體可以直接使用的話,那又要如何繪製兩種版本的Wireframe呢?RWD指的是網站能夠自動偵測不同裝置的瀏覽器尺寸,能針對不同尺寸自動調整網頁的內容(圖文表單控件…等)。如果把HTML當成一種內容的文件,那麼CSS則在說明這些「內容」要擺哪裡、有什麼樣外觀樣式。先撇開「外觀」單講「內容」的話,通常同一頁網頁在不同尺寸下,看到的「內容」大致上會是相...
之前曾經去演講過的學校,有學生傳訊問了關於 RWD 設計的問題。
設計師在繪製 RWD 網站的 Wireframe 時,會繪製 PC 和 Mobile 兩個版本嗎?或是直接使用軟體去做版本之間的切換呢?
若是沒有軟體可以直接使用的話,那又要如何繪製兩種版本的 Wireframe 呢?
RWD 指的是網站能夠自動偵測不同裝置的瀏覽器尺寸,能針對不同尺寸自動調整網頁的內容(圖文表單控件…等)。
如果把 HTML 當成一種內容的文件,那麼 CSS 則在說明這些「內容」要擺哪裡、有什麼樣外觀樣式。
先撇開「外觀」單講「內容」的話,通常同一頁網頁在不同尺寸下,看到的「內容」大致上會是相同的,差別在於擺放位置外觀樣式。
既然「內容」都一樣,所以 RWD 很多時候只寫一個 HTML,透過 CSS 設定不同外觀,偵測不同的瀏覽器尺寸,決定呈現什麼樣子的網頁。
但是瀏覽器尺寸落差非常大,從手錶、手機、平板電腦、筆電、桌機、電視都有可能。肯定要針對落差這麼大的瀏覽器尺寸進行不同的外觀設計。
Bootstraphttps://getbootstrap.com/[1]
目前業界流行使用 Bootstrap 處理 RWD 。 是一組用於網站和網路應用程式開發的開源前端框架,簡單來說,就是能夠幫你面對 RWD 尺寸變化這麼大的輔助工具,只是在開發上有些規定需要配合。
在 Bootstrap 的官方文件裡,將瀏覽器劃分成:手機 sm、平板 md、桌機 lg、大型桌機 xl。
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media ...取得本站獨家住宿推薦 15%OFF 訂房優惠
WINDOW RESIZER 模擬各種螢幕尺寸,RWD必備的擴充套件
WINDOW RESIZER─模擬各種螢幕尺寸,RWD必備的擴充套件 ... 針對某個機型做數值設定的話,WINDOW RESIZER也可以自己設定尺寸幫助設計師調整畫面。