 |
| 昵稱：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈(zèng)鮮花： 182 |
|
 |
|
|
發(fā)表時(shí)間：2015/11/2 23:40:00 |
樓 主 |
|
 |
|
 |
|
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
@陳子木?響應(yīng)式設(shè)計(jì)是由著名網(wǎng)頁設(shè)計(jì)師EthanMarcotte在2010年5月提出的設(shè)計(jì)概念，隨后席卷前端和設(shè)計(jì)領(lǐng)域，成為了如今網(wǎng)頁設(shè)計(jì)的大趨勢。正如同Ethan所說：“響應(yīng)式網(wǎng)站設(shè)計(jì)提供了一種全新的選擇，這種基于柵格布局和CSS3的流動(dòng)性網(wǎng)頁設(shè)計(jì)，可以讓網(wǎng)頁隨著屏幕變化而響應(yīng)。這是一種更為統(tǒng)一，更加全面的設(shè)計(jì)技巧，一種打破網(wǎng)頁固有型態(tài)和限制的靈活設(shè)計(jì)方法。”
?
這種兼顧多屏幕多場景的靈活設(shè)計(jì)，這就是響應(yīng)式設(shè)計(jì)令人著迷的所在。這一點(diǎn)和編程開發(fā)領(lǐng)域所追求的“一次編寫，到處運(yùn)行”有著異曲同工之妙。所以它在短短幾年內(nèi)迅速火起來，然后成為大趨勢，可以說是意料之中，水到渠成。響應(yīng)式設(shè)計(jì)的網(wǎng)頁現(xiàn)在已經(jīng)很多了，而相關(guān)的教程也是數(shù)不勝數(shù)。國外的設(shè)計(jì)博客Pixel77搜集了15篇優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計(jì)的教程，讓喜歡鉆研的你來學(xué)習(xí)。
更多關(guān)于響應(yīng)式網(wǎng)站的文章：《緊跟潮流！30個(gè)新鮮的響應(yīng)式網(wǎng)站欣賞》《最熱門工具推薦！為響應(yīng)式網(wǎng)站而生的40款柵格神器》《干貨！如何在響應(yīng)式網(wǎng)頁中安置和處理圖片及視頻》
現(xiàn)在先簡單介紹一下這15個(gè)教程，隨后優(yōu)設(shè)會(huì)挑選其中比較突出的文章單獨(dú)翻譯出來?，F(xiàn)在，大家就先睹為快吧！
?
1、響應(yīng)式網(wǎng)頁設(shè)計(jì)：它是什么以及如何使用（作者KaylaKnight）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
KaylaKnight的這篇文章是非常不錯(cuò)的入門基礎(chǔ)教程。Knight會(huì)引導(dǎo)你了解響應(yīng)式設(shè)計(jì)的基礎(chǔ)知識，讓你明白它的基本原理。如果你想著手設(shè)計(jì)響應(yīng)式網(wǎng)頁，這篇文章會(huì)告訴你應(yīng)該從何處下手。
?
2、響應(yīng)式網(wǎng)站導(dǎo)航（作者ThoriqFirdaus）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
響應(yīng)式網(wǎng)站中，導(dǎo)航欄是非常重要的組成部分，如何設(shè)計(jì)出優(yōu)質(zhì)的響應(yīng)式導(dǎo)航欄就顯得特別重要了。所以我們專門挑出這篇一流的響應(yīng)式網(wǎng)站導(dǎo)航設(shè)計(jì)的教程，供大家參考學(xué)習(xí)。
?
3、使用CSS構(gòu)建基礎(chǔ)的響應(yīng)式站點(diǎn)（作者JasonMichael）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這又是一篇響應(yīng)式網(wǎng)站設(shè)計(jì)領(lǐng)域重量級的入門教程。這篇文章不僅僅為你講述了響應(yīng)式網(wǎng)站基本的CSS設(shè)計(jì)方法，Micheal還會(huì)幫你解答一系列設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)常見的問題和迷思。
?
4、如何將任何網(wǎng)站轉(zhuǎn)化為響應(yīng)式網(wǎng)站（作者RochesterOliveira）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這篇教程同樣是從響應(yīng)式設(shè)計(jì)的基礎(chǔ)概念開始，作者熟練地分析解讀了常見的標(biāo)簽，在文中后半段還傳授了一項(xiàng)極有價(jià)值的技能：教你如何將現(xiàn)有的網(wǎng)站轉(zhuǎn)化成為一個(gè)響應(yīng)式的站點(diǎn)。所以，這篇文章一定不能錯(cuò)過！
?
5、使用響應(yīng)式柵格系統(tǒng)設(shè)計(jì)網(wǎng)站（作者GrahamMiller）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
響應(yīng)式柵格系統(tǒng)并非框架，深入理解柵格系統(tǒng)是非常有意義的。如果你想深入了解這個(gè)概念，那么還有什么方式比閱讀這個(gè)概念的提出者GrahamMiller的文章來的更有效呢？這篇教程會(huì)教你使用柵格系統(tǒng)1小時(shí)快速創(chuàng)建響應(yīng)式網(wǎng)站！
?
6、教你使用FlowType.JS制作響應(yīng)式web排版（作者JDGraffam）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
眾所周知，排版是Web的未來。所以，學(xué)會(huì)響應(yīng)式排版并不是一種額外的優(yōu)勢，而是必備的技能。因此，JD的這篇排版的教程就是幫你解決這方面問題的。
?
7、如何制作響應(yīng)式排版（作者ValHead）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這是另外一篇關(guān)于排版的教程。ValHead詳細(xì)地解釋了為什么一個(gè)尺寸無法應(yīng)付所有的場景，并且詳細(xì)介紹了如何讓圖片和布局能隨著尺寸改變而響應(yīng)。
?
8、響應(yīng)式設(shè)計(jì)三部曲（作者NickLa）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這篇教程詳細(xì)講述了如何正確使用Meta標(biāo)簽、HTML結(jié)構(gòu)和媒體查詢來制作響應(yīng)式網(wǎng)站。這是最基礎(chǔ)的入門教程之一，寫的非常不錯(cuò)。如果你對這些東西掌握得不夠好的話，不妨讀讀這篇文章！
?
9、CSS：響應(yīng)式導(dǎo)航欄菜單（作者NickLa）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這是NickLa的另外一篇文章，寫的也是如何使用CSS來寫響應(yīng)式導(dǎo)航欄的。這篇文章寫的簡潔明了，值得一讀。
?
10、響應(yīng)式網(wǎng)站設(shè)計(jì)中的可擴(kuò)展導(dǎo)航模型（作者M(jìn)ichaelMesker）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這篇教程可以幫你創(chuàng)造易于配置、體驗(yàn)良好的響應(yīng)式網(wǎng)站模板。這篇文章是源自于作者M(jìn)esker的經(jīng)驗(yàn)總結(jié)，在此之前，他曾參與過一個(gè)大型的響應(yīng)式網(wǎng)站開發(fā)項(xiàng)目。
?
11、基于現(xiàn)有網(wǎng)站的響應(yīng)式改造（作者M(jìn)attStow）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
作者M(jìn)attStow通過這篇網(wǎng)站手把手地教你如何將你的現(xiàn)有網(wǎng)站轉(zhuǎn)化為一個(gè)足夠出色的現(xiàn)代響應(yīng)式站點(diǎn)。強(qiáng)烈推薦需要改造網(wǎng)站的同學(xué)閱讀一下這篇文章。
?
12、如何讓導(dǎo)航欄在小屏幕上轉(zhuǎn)化為下拉框（作者ChrisCoyier）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
如何讓導(dǎo)航欄在小屏幕上轉(zhuǎn)化為下拉框？這篇優(yōu)秀的教程可以幫你解決這一小問題。當(dāng)你處理移動(dòng)端的頁面布局的時(shí)候，有時(shí)候會(huì)有這一的需求，有了這篇教程，你就再也不用擔(dān)心這個(gè)問題了！
?
13、響應(yīng)式圖片：嘗試讓圖片感知環(huán)境自適應(yīng)（作者ScottJehl）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這篇教程會(huì)教你如何正確控制響應(yīng)式網(wǎng)站中的圖片，讓它們能隨著屏幕尺寸的變化而自適應(yīng)。作者ScottJehl思路清晰，言簡意賅，值得閱讀。
?
14、響應(yīng)式水平布局（作者M(jìn)aryLou）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
這篇教程會(huì)教你如何創(chuàng)建一個(gè)具幾個(gè)水平滾動(dòng)面板的響應(yīng)式布局。這種設(shè)計(jì)的技巧在于，當(dāng)屏幕空間夠大的時(shí)候，面板會(huì)水平鋪開，當(dāng)空間不足的時(shí)候，它們會(huì)合并到一起，以選項(xiàng)卡的形式存在。
?
15、視差流態(tài)特效的CSS3幻燈片響應(yīng)式網(wǎng)站設(shè)計(jì)（作者RingWing）
設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
視差滾動(dòng)式網(wǎng)頁也是目前網(wǎng)頁設(shè)計(jì)的趨勢，如何將響應(yīng)式網(wǎng)站中的幻燈片使用CSS3制作成視差滾動(dòng)的效果，就是這篇教程要叫你做的事情。
上面基本就是Pixel77所推薦的15篇教程了。有哪些是你們非常想中文化的，請?jiān)谙路搅粞?，我?huì)有限翻譯呼聲最高的文章。謝謝！
特別說一下，如果你還從來木有用手機(jī)訪問過優(yōu)設(shè)網(wǎng)，不妨現(xiàn)在試試，會(huì)有驚喜喲→http://www.nev.cn/
原文地址：pixel77優(yōu)設(shè)網(wǎng)翻譯：@陳子木
?
?
原文：http://www.nev.cn/15-responsive-web-design-tutorials
轉(zhuǎn)自：設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程
?
?
? |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個(gè)中國人、每個(gè)中國企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|