資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究網頁的HTML5響應式設計
HTML5，這種最新且流行的網頁設計語言，突然席捲了設計界。之前我們有HTML，現在有了HTML5。然而，如果我們看看兩者之間的主要區別，我們會發現真正使HTML5與HTML不同且更好的一點是**響應式設計**。
網頁的響應式設計是指網頁在瀏覽器載入後根據媒介獲得的輸出或響應。
使用HTML時，存在許多侷限性，這就需要一個新版本。網頁設計師無法靈活地根據不斷變化的技術建立網頁。
最新的技術允許使用者在臺式機、筆記型電腦、手機、iPad等裝置上訪問網頁。此外，所有這些裝置都具有不同的尺寸。網頁設計師一直在尋找一種適合所有裝置的解決方案。作為回應，HTML5應運而生。
流體佈局
HTML5是HTML、CSS和JavaScript的組合。它允許使用者建立具有流體或靈活佈局的網頁，就像水一樣。眾所周知，水會根據容器的形狀而變化，類似地，流體佈局允許設計師將內容浮動在指定的容器中。同一個網站，在iPad上開啟時會根據其尺寸進行調整，如果在手機上訪問相同的URL，也會適應其尺寸。
我們網頁設計師的另一個訴求與內容相關。如果我們想在手機螢幕上顯示不同的內容，在筆記型電腦螢幕上顯示不同的內容怎麼辦？讓我用一個非常簡單的例子來解釋這個概念背後的心理學原理。假設，你在辦公室，你的團隊突然計劃一個戶外午餐聚會。你拿出手機，開啟一個網頁來查詢附近的餐廳（如zomato、dineout等），然後根據你的標準篩選它們，並選擇最符合你要求的餐廳。那麼，如果你的團隊計劃在接下來的週末舉行午餐聚會呢？在這種情況下，你可能會開啟你的筆記型電腦；開啟同一個網站的網頁，瀏覽頁面，檢視優惠、裝飾和附加功能。
透過這個例子，我們假設在手機上開啟網頁的使用者可能很匆忙，沒有時間四處瀏覽設計。使用者會關注功能而不是設計使用者介面。然而，當在筆記型電腦/桌上型電腦瀏覽器中檢視同一個網頁時，使用者可能有時間欣賞設計部分。
響應式設計允許網頁設計師壓縮或拉伸頁面以適應裝置的螢幕區域，並隱藏/顯示影像或標籤。
響應式網頁設計是指根據使用者的裝置螢幕解析度調整佈局來開發網頁的概念。它允許網頁設計師調整佈局並首先呈現相關資訊：小時數、電話號碼、方向以及指向選單的連結。同時回到你的辦公桌前，餐廳的頁面擁有你在手機上瀏覽時並不關心的所有花裡胡哨的功能。
響應式網頁設計 (RWD) 中的佈局是使用靈活或流體佈局引數（如em和百分比）而不是固定值（如畫素、磅等）完成的。
為了在你的頁面中實現響應式設計，頁面的結構會發生改變，HTML5 的基本概念就會發揮作用。在HTML5中編寫程式碼的基本準則是：
- 內容放在HTML檔案中
- 外觀和位置放在CSS檔案中
- 驗證放在JavaScript檔案中
因此，為了獲得響應式設計，我們需要根據裝置的螢幕尺寸更改CSS檔案，而我們的內容（位於HTML頁面中）保持不變。
RWD策略
響應式網頁設計使用漸進增強而不是傳統的優雅降級。
優雅降級強調構建與最新和最先進的瀏覽器相容的網頁。展望未來，將為舊版瀏覽器提供支援，但預期的故障將是軟體包的一部分。
而漸進增強則關注內容而非瀏覽器。將此概念視為內容優先的方法，就像花生M&M巧克力一樣。
- 花生：用豐富的語義HTML標記的內容
- 塗上豐富的奶油CSS
新增JS作為硬糖殼
RWD框架
HTML5框架只是一個預先建立的模板，其中包含預定義的可重用CSS和JS檔案以及頁面上的虛擬文字作為內容。它們幫助初級開發者開始進行基本設計。佈局已定義，設計已建立。
市場上有多個框架可用於實現響應式設計。最流行且易於實現的是——**Twitter Bootstrap**。此外還有Foundation、Skeleton、Boilerplate、Kickstart等等。大多數這些框架使用基於網格系統的初始佈局開發。
Twitter Bootstrap採用移動優先方法，免費使用且易於安裝。通用的CSS檔案是軟體包的一部分，有助於設計網頁上的大部分元素和控制元件。有多種型別的佈局可幫助你構建網頁。
響應式網頁設計是最受歡迎的技術，並且逐漸成為任何網站的標準要求。網上有大量的支援可用於實現，並且有多種工具可供使用。
211 次瀏覽
