尼姆游戏等式

您當前的位置是:首頁 - 設計理論 - 正文

自適應css布局—流動布局新時代
發布日期:2012-2-6  瀏覽次數:1808次   優化北京網站建設  

      流動網頁設計有很多好處,但也只有在正確使用的時候。合適的技巧會使頁面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈現。但是,糟糕的代碼結構,對于流動布局來說將是災難性的。因此,我們需要針對大多數流動設計的缺點尋求可行的解決方案。

      如果你作為設計師通過額外的付出創造了一個功能性流動布局,為什么不更進一步使其兼容所有分辨率,而不是局限于大多數屏幕。你可以使用一些技巧創造一種意想不到的適應性布局,這種布局在不斷改變屏幕分辨率情況下會保持功能上的完整性。

在這篇文章,我們將討論創造100%功能自適應css布局的行之有效的方法,并提供其他教程和實踐的詳細清單:

你也參考以前的文章:

固定&流動&彈性布局:哪一個適合你?

這篇文章討論每一種布局類型的優點和缺點。其中的任何一個可以用來創造一個成功的網站布局,只要保持其可用性就行;

靈活布局:未來的挑戰

討論靈活布局在未來的挑戰;

屏幕分辨率和更好的用戶體驗

介紹屏幕分辨率的問題,然后普通用戶的個人腳本。

一、使用網格的流動布局

      我們大多數人都聽說過設計固定寬度網頁的 960網格系統 ,使用960網格系統使得固定寬度的設計比流動布局更可取。但是,有一種方法可以創建一個基于網格的彈性布局。從技術上講,彈性布局的代碼結構不同于流動布局,但它為用戶提供的幾乎是相同的效果。

什么是流動布局?

      流動網格是通過智能的使用div、百分比和簡單的數學計算來創建的。這種理念來自于Ethan Marcotte ,他認識到“em”比字體大小進步。我們在這重溫這個基本概念,但要對該方法有一個全面而詳細的了解,請參閱“流動網格”,這是一篇全面的關于建立基于網格的彈性布局的教程。

      其理念是使用相對尺寸、結合百分比和em,用簡單的分割以找到相對應的像素寬度,而這些寬度是在固定寬度設計中使用的。

優點:

這種方法使你擁有一個網格布局,這看起來可能僅固定一次寬度;

用戶可以使用預設的字體大小查看這個布局,并且保持其比例大小;

布局樣式跨瀏覽器兼容;

一旦理解之后,流動設計中的大多數問題將容易修復。

 

 


上一篇:沒有交互意識的設計師,不是一個合格的設計師
下一篇:banner字體設計與應用
點擊查看更多設計理論新聞   丨   點擊返回上一頁
尼姆游戏等式 四川时时是 龙虎和时时彩走势图 e现金棋牌游戏注册送 广东时时视频直播 河南福彩网幸运彩开奖 888真人在线棋牌 秒速时时最精准人工计划 快乐赛车官方 重庆时时彩计划工具安卓版 时时后三乘133公式 河北11选5开奖直播 湖北11选五开奖结 体彩31选7机选号码 六会彩彩讯网 广东时时现场开奖 1000炮金蟾捕鱼游戏机打法