響應式Web設計

2022-08-21 00:39:14 字數 958 閱讀 2576

設計師熟知的在印刷**的控制功能,常常也會期望web**會有,但是他們僅僅限制在列印出來的頁面上才能使用。我們必須接受這樣的事實:web根本沒有同樣的限制和為這樣的彈性準備的設計。但是首先我們必須接受這種落差和流程。

英國建築師christopher wren有一次開玩笑說他選擇了乙個"以永恆為目標"的領域,而這樣的原則也有它吸引人的一面:不像是web那種總讓人感覺是以下星期為目標的東西,建築是乙個以他的永續性來定義的學科。乙個建築的地基決定了它的底座,底座決定了他的結構,結構決定了它的外觀。建築的每乙個階段都比上乙個階段更固定,更難以改變。創造性的決定極其確切地決定了物理空間的形狀,規劃好了人們幾十甚至幾百年間在這個範圍中活動的方式。

然而在web上工作則是完全不同的事情。我們的工作內容由瞬時性定義,經常在一兩年裡就要調整或者替換。不一致的視窗寬度,螢幕解析度,使用者偏好以及我們使用者安裝的字型僅僅是在交付工作時要衡量的奇怪東西中的冰山一角。經年累月我們逐漸變得不可思議地精於此道。

近年來,我見到更多公司開始要求"iphone版**"作為他們專案的一部分。這是乙個很有趣的說法:從表面來看,當然,這是說移動版webkit完全達到瀏覽器的品質,同時也是跳出桌面思考的乙個強有力的商業案例。但是作為設計師,我覺得我們經常從這樣明確的要求中尋找安慰,因為他們允許我們把面前的問題劃分開來。我們可以把移動體驗明確地隔離到單獨的子域和空間中,跟"非iphone版**"分開。但是接下來呢?乙個ipad**?再來乙個n90**?我們真的能一直這樣保證為每一種新的使用者**提供專門為之設計的體驗?從某種意義上講,這開始感覺像是乙個零和遊戲,但是我們——以及我們的設計——該如何適配呢?

讓我們考慮乙個設計的例子。我建立了乙個簡單的幻想雜誌頁面。它是在流體格上的直接的兩欄布局,其中到處散布著一些彈性的。作為非固定布局的長期支持者,我長期認為它們更加"面向未來"僅僅因為它們不針對特定布局。在某種程度上,規則是:彈性設計沒有對瀏覽器視窗寬度做任何假設,並且非常漂亮地適配了具有人像和景物圖模式的裝置。

響應式web設計

initial scale 1.0 script 不使用width px 只使用百分比寬度width xx 或者width auto 字型也不能使用絕對大小 px 而只能使用相對大小 em 如 font normal 100 helvetica,arial,sans serif 字型大小是頁面預設大...

響應式web設計

響應式網頁設計是時下網頁設計領域最熱門的話題之一,該概念由著名網頁設計師 ethan marcotte 在2010年5月份提出,其目標是要讓設計的 能夠響應使用者的行為,根據不同終端裝置自動調整尺寸。簡而言之,就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。那麼,怎麼實現響應式設計呢?...

響應式Web設計

一 media 查詢 溫故而知新,回顧下自己對 media 查詢的理解吧。查詢相當於是乙個條件,只有滿足了這個條件才會執行 查詢內的樣式表。查詢的語法 media screen and min width 300px 該語句描述了當使用的裝置型別為螢幕時,螢幕的最小寬度大於等於300px時,將應用該...