首頁 > 網頁教程 > CSS > 什么是響應式網頁設計?響應式布局的實現原理

昂热法国:什么是響應式網頁設計?響應式布局的實現原理

時間:2013-09-15    來源:isux

法国昂热国立音乐学院 www.sxrkbx.com.cn 概念

響應式網頁設計最初是由 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 – //qzone.com
  • Mobile – //m.qzone.com
  • 響應式:PC & Mobile – //qzone.com 無需跳轉

本地存儲

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

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

responsive-web-design

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

實施

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

  1. 響應式布局
  2. 響應式內容(圖片、多媒體)

響應式布局

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

那么我們的布局應該是一種彈性的柵格布局,不同尺寸下彈性適應,如以下頁面中各??樵誆煌嘰縵碌奈恢茫?/p>

響應式布局

那么我們要怎么做?

Meta標簽定義

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

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

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

<meta name="apple-mobile-web-app-capable" content="yes" />

隱藏狀態欄

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

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

<meta name="format-detection" content="telephone=no" />

使用 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比例值,屏幕的縱橫比

例子:

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
	selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
	selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
	selector{ ... }
}

適用于布局的 Media Queries 這里不做詳述,可通過官方文檔進一步了解
那么對于表格(table)的響應式處理該是怎樣的呢?我們該如何突破Table的局限性呢?
接下來我們來了解以下的幾種針對表格響應式處理的方法:

隱藏不重要數據列

table
處理前

r7
處理后

實現方法:

@media only screen and (max-width: 800px) {
	table td:nth-child(2), 
	table th:nth-child(2) {display: none;}
}

@media only screen and (max-width: 640px) {
	table td:nth-child(4),
	table th:nth-child(4),
	table td:nth-child(7),
	table th:nth-child(7),
	table td:nth-child(8),
	th:nth-child(8){display: none;}
}

以用戶角度思考,每個人對數據的認知不同,或許你隱藏的數據對于他卻是很重要的。所以這種方法不推薦。

相關推薦
8個超棒的創建響應式網頁設計框架推薦
Cikonss:基于CSS創建響應式的圖標字體插件介紹
CSS與響應性設計的未來及改進設想
17款超棒的前端開發響應式開發框架推薦
10款提升工作效率的響應式頁面設計工具推薦
14款響應式布局的前端開發框架推薦
DIV+CSS布局兩列右列寬度自適應布局的不同實現方法
CSS網頁布局有關中文排版的九個技巧
相對定位中奇數的寬和高導致IE6布局BUG
CSS的Z-index屬性深度解剖
揭開CSS定位屬性Position的神秘面紗
如何用CSS實現多個子框架居中?
CSS3盒子模型(Flexible Box Module)之位置排序應用詳解
CSS3盒子模型(Flexible Box Module)之尺寸應用詳解
CSS之固定布局、流動布局、彈性布局優缺點分析(上)
CSS之固定布局、流動布局、彈性布局優缺點分析(下)
CSS布局常見的十個BUG
10種導致CSS布局頁面錯亂的解決方法分享
CSS新手教程:學習CSS頁面布局和加載流程
CSS創建復雜布局的利器—Flexible Box Model
CSS多列布局Multi-column、伸縮布局Flexbox、網格布局Grid詳解
CSS水平居中/垂直居中的N個方法 前端開發必收藏
前端開發框架Bootstrap3.0新手入門學習系列教程
前端開發框架Bootstrap3.0學習教程之入門篇
WEB前端開發應該注意的問題8點(原創技巧)
網頁前端開發:微博CSS3適用細節初探

精彩推薦

熱門教程