Responsive網(wǎng)頁設計無疑是網(wǎng)頁設計中的一個熱門話題。某種程度上，他將是一個最受歡迎的網(wǎng)頁設計概念，因為隨著網(wǎng)站用戶日漸多樣化的訪問方法，比如說“iPad”、“iPhone”、“Android移動設備”、“平板電腦”、“臺式機”以及“ 筆記本”等不同形式的顯屏出現(xiàn)。這樣我們以前那樣的網(wǎng)頁設計就無法在適合上述各種設備的瀏覽，這也給我們今后的網(wǎng)頁設計工作提出一個新的概念——Responsive設計

Responsive網(wǎng)頁設計的主要特點

- 該網(wǎng)站必須建立靈活的網(wǎng)格基礎

- 引用到網(wǎng)站的圖片必須是可伸縮的

- 不同的顯示風格，需要在media queries上寫不同的樣式

1. 靈活的網(wǎng)格系統(tǒng)

網(wǎng)頁的網(wǎng)格系統(tǒng)應用，他在網(wǎng)頁設計中的概念越來越模糊。換句話說，你的網(wǎng)站必須包括一個靈活的網(wǎng)格系統(tǒng)，并不意味你的網(wǎng)站需要使用一個龐大的網(wǎng)格系統(tǒng)，比如說960s。所以在你的網(wǎng)頁設計中定義一個你自己需要的列、列間距等參數(shù)，才是一個網(wǎng)頁設計的最佳解決方案，自己定義的和現(xiàn)有的任何一個系統(tǒng)同樣是靈活可變的

事實上，大多數(shù)現(xiàn)有的網(wǎng)格系統(tǒng)限制了我們自定義列的大小，和間距，換回來說，使用現(xiàn)有的網(wǎng)格系統(tǒng)，我們需要遵循他的使用模板原則才能生效，但這樣一來往往對我們的使用有太多的限制，然而自己動手一個網(wǎng)格系統(tǒng)，又是一件棘手的事，而且也是一件費時的事。所以說，無論我們使用現(xiàn)有的網(wǎng)格還是自己自定義的網(wǎng)格系統(tǒng)，最主要的是要讓他適合我們布局的大小和間距的需要

這樣就意味著，我們需要放棄常用的“px”固定布局，而使用百分比或者“em”這樣的流體布局來實現(xiàn)“web布局”。當然這樣并不是說我們在設計軟件中不能使用“px”，我們在設計頁面的圖片效果時，還是在“px”的基礎上實現(xiàn)，因為我們只是在Web頁面中使用一個相對單位來實現(xiàn)需要的網(wǎng)頁布局。這樣說或許有點模糊。我們可以換過來說“設計web頁面的模型效果，我們還是使用“px”來定其大小與間距，只是在圖片效果轉(zhuǎn)成web頁面效果時，才采用“百分比”或用“em”這樣的相對單位來替代“px”，從而實現(xiàn)一種比較靈活的布局。”具體他們之間的區(qū)別，大家不妨移步到Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?查看他們之間的區(qū)別所在

2. 靈活的圖片

這里所說的靈活的圖片指是的圖片的可收縮性，這一點也是Responsive設計中的另一個關鍵點。靈活的圖像常常給網(wǎng)頁設計師有點頭痛，有點煩。因為載入是超大的圖像時，我們在縮小顯屏大小時，這些超大的圖像就會破壞我們的布局。為了讓更小的顯屏和其小移動設備能顯示更多的文本內(nèi)容，我們需要縮小這些超大的圖片，最早使用的是就是通地改變圖片的width和height屬性來實現(xiàn)。這樣一來對于網(wǎng)頁載入并不是一個很好的做法。這也將嚴重的影響你的網(wǎng)站形象。還好，隨著網(wǎng)頁設計的向前發(fā)展，我們看到網(wǎng)站上越來越少使用那些不必要的圖片，但是目前，我們還是需要考慮如實來處理這樣的一個問題，讓這個超大圖片在你的Responsive設計中并不會給你帶來麻煩

就是使用CSS來控制，使用CSS中的“overflow:hidden”將超出的圖片部分進行剪切，隨著他的容器轉(zhuǎn)變，以達到新的顯示效果

其實這種方法也不是最佳的解決方法，我們曾在《Responsive設計和CSS3 Media Queries的結(jié)合》中也探討了如何實現(xiàn)圖片的可伸縮性

3. Media Queries

Media Queries是CSS3之中的一個新增屬性，也是Responsive設計中令人最興奮的一個功能

通常情況下，我們有一個老的思路，就是我們的網(wǎng)站只能一個適合的樣式，如果你想動態(tài)的改變樣式，就需要借助其他的語言來幫忙，但這個Media Queries出現(xiàn)，可以讓我們使用相同的HTML結(jié)構(gòu)，創(chuàng)建多個布局，并且還可以實現(xiàn)多個不同的頁面效果，從而使用網(wǎng)站適合各個不同顯屏的瀏覽器瀏覽

大家需要注意一點Media Queries不是專門的解決移動設備和平板設備的布局。相反，Media Queries和Responsive的配合，能讓我們覺得我們的設計能適應不同的屏幕大小顯示。有關于這方面的實例介紹，大家感興趣的話可以點閱——《Responsive設計和CSS3 Media Queries的結(jié)合》

從Responsive設計中三個特點來看，確實讓人興奮不起來，可是事實上，這將是一個良好的設計開始。良好的THML結(jié)構(gòu)和一個靈活多變的布局，難道不讓你覺得特別的新嗎。在這樣的一個日新月異的技術變化的大背景之下，需要靈活的布局更是勢在必行。現(xiàn)在，讓我們可以更好的適應更多的顯屏 瀏覽的情況下，我們需要的是流體的，靈活的一種設計。Responsive設計迫使我們采取行動開始做這樣的事情

總結(jié)

以上是生活随笔為你收集整理的CSS之Responsive网页设计的三个特性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。