重溫"什么是響應式網頁設計？響應式布局的實現原理"

Nekron 發布于2019-08-29 12:28 / 529人閱讀

摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。

概念

響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是關于屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對于設計的全新思維模式；我們應當向下兼容、移動優先。

背景

PC互聯網加速向移動端遷移：2012年12月底我國網民規模達到5.64億，互聯網普及率為42.1%，手機用戶占網民總數的74.5%。預計到2015年，移動互聯網的數據流量將超越PC端的流量。

移動端入口：當用戶希望通過手機來完成PC頁的操作時，常見的是商家的運營微博，期文案足夠吸引用戶點擊鏈接參加活動，如果該活動頁沒做響應式處理：頁面體積大、請求多、體驗差、兼容性差，層層阻礙最終導致用戶放棄參加。

優勢開發成本低，門檻低

Native APP：Objective-C or Java – 學習成本高
Hybrid APP： 外殼+Web APP，需安裝。
響應式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快

跨平臺和終端且不需要分配子域

雖然可通過監測用戶UA來判斷用戶終端后做跳轉，但它還是分配了多個域，而響應式無需監測用戶UA沒有域的切換，只需根據終端類型來適配不同的功能模塊與表現樣式，它是跨平臺和終端的，1頁面適配多終端。

PC – http://qzone.com
Mobile – http://m.qzone.com
響應式：PC & Mobile – http://qzone.com 無需跳轉

本地存儲

Web App可以利用本地存儲的特性將重要和重復的數據保存在本地，避免頁面的重復刷新，減少重要信息在傳輸過程中被泄露，增量傳輸修改內容。

無需安裝成本，迭代更新容易

responsive-web-design

更靈活、更方便的APP使用及安裝方式將成為HTML5在移動平臺上大放異彩的保障之一

實施

首先我們應該遵循移動優先原則，交互&設計應以移動端為主，PC則作為移動端的一個擴展；
一個頁面需要兼容不同終端，那么有兩個關鍵點是我們需要去做到響應式的：

響應式布局
響應式內容（圖片、多媒體）

響應式布局

如我們需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，怎樣才能做到讓一種設計方案滿足所有情況？

那么我們的布局應該是一種彈性的柵格布局，不同尺寸下彈性適應，如以下頁面中各模塊在不同尺寸下的位置：

響應式布局

那么我們要怎么做？

Meta標簽定義

使用 viewport meta 標簽在手機瀏覽器上控制布局

通過快捷方式打開時全屏顯示

隱藏狀態欄

iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉

使用 Media Queries 適配對應樣式

常用于布局的CSS Media Queries有以下幾種

設備類型(media type):

all所有設備
screen 電腦顯示器
print打印用紙或打印預覽視圖
handheld便攜設備
tv電視機類型的設備
speech語意和音頻盒成器
braille盲人用點字法觸覺回饋設備
embossed盲文打印機
projection各種投影設備
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端

設備特性(media feature):

width瀏覽器寬度
height瀏覽器高度
device-width設備屏幕分辨率的寬度值
device-height設備屏幕分辨率的高度值
orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，屏幕的縱橫比

GPU云服務器云服務器響應式布局 asp如何響應式布局 html響應式導布局響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111920.html

重溫&quot;什么是響應式網頁設計？響應式布局的實現原理&quot;

摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。概念響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

Joyven 2019-08-01 16:43 評論0 收藏0
前端面試資源整理（一）

摘要：是上一次加載資源時，服務器返回的，是對該資源的一種唯一標識，只要資源有變化，就會重新生成。同源限制如果非同源以下三種行為將受到限制和無法讀取。Js相關執行環節和作用域執行環節定義了函數或者變量可以訪問的其它數據，決定了他們各自的行為。每個執行環境都有一個與之關聯的變量對象，在環境中定義的所有變量和函數都保存在這個變量中，并且是我們無法訪問。每個函數都有自己的執行環境，當執行流進入一個函數的時...

jzzlee 2019-08-22 15:32 評論0 收藏0
前端面試資源整理（一）

摘要：是上一次加載資源時，服務器返回的，是對該資源的一種唯一標識，只要資源有變化，就會重新生成。同源限制如果非同源以下三種行為將受到限制和無法讀取。Js相關執行環節和作用域執行環節定義了函數或者變量可以訪問的其它數據，決定了他們各自的行為。每個執行環境都有一個與之關聯的變量對象，在環境中定義的所有變量和函數都保存在這個變量中，并且是我們無法訪問。每個函數都有自己的執行環境，當執行流進入一個函數的時...

phoenixsky 2019-08-30 14:11 評論0 收藏0
Vue3中reactive與ref函數使用場景

　　我們知道在 Vue3 中有兩個非常常用的響應式 API：reactive 和 ref。這樣就可以變成我們想要追蹤的數據變成響應式。　　知道嗎？在使用時一直被告知 ref 用于創建基礎類型的響應式，也可以創建引用類型的響應式。而對于引用類型，底層也是轉換為 reactive 來進行響應式處理。那既然這樣為撒還需要 reactive ，全部使用 ref 不就行了嗎？　　雖然 ref 創建的響應式數...

3403771864 2022-10-16 15:30 評論0 收藏0