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

Responsive網(wǎng)頁設(shè)計(jì)的主要特點(diǎn)

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

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

- 不同的顯示風(fēng)格，需要在media queries上寫不同的樣式

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

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

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

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

2. 靈活的圖片

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

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

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

3. Media Queries

Media Queries是CSS3之中的一個(gè)新增屬性，也是Responsive設(shè)計(jì)中令人最興奮的一個(gè)功能

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

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

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

總結(jié)

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

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