我們常常聽(tīng)到網(wǎng)頁(yè)設(shè)計(jì)公司打著RWD響應(yīng)式設(shè)計(jì)的口號(hào)，說(shuō)這是一種很厲害很新的東西？但真的是這樣嗎？

首先我們要先來(lái)介紹什么是RWD

RWD全名Responsive Web Design中文我們常常翻譯成響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

最早使用這種技術(shù)的是Audi .com也就是我們所熟知的奧迪汽車(chē)的官網(wǎng)。

這是一種應(yīng)用瀏覽器browser viewport width 也就是瀏覽器視窗寬度來(lái)調(diào)整版面的設(shè)計(jì)方式。

記得早期我們上weibo的時(shí)候，如果用手機(jī)上微博網(wǎng)站，都會(huì)切換到m.weibo.com這樣子的手機(jī)版網(wǎng)站。而這種設(shè)計(jì)恰恰解決了這樣的問(wèn)題，利用了自動(dòng)排版的CSS可以設(shè)定讓我們的網(wǎng)頁(yè)自動(dòng)縮排。

在我們的網(wǎng)站HTML中加入這樣的短短一行代碼，就能夠允許CSS根據(jù)屏幕寬度來(lái)判斷什么寬度要呈現(xiàn)什么樣式。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這樣的設(shè)計(jì)原則，其實(shí)有很大的一個(gè)重點(diǎn)是很多坊間的網(wǎng)絡(luò)公司所沒(méi)有提到的。

就是mobile-first design（我把它稱為從手機(jī)出發(fā)的設(shè)計(jì)）

Mobile-First Design (手機(jī)優(yōu)先設(shè)計(jì)）

這樣的設(shè)計(jì)就是先從手機(jī)的小板面設(shè)計(jì)開(kāi)始，然后再去思考隨著屏幕逐漸拉大的時(shí)候，要去調(diào)整什么樣的版面設(shè)計(jì)。

我們可以在寫(xiě)CSS 的時(shí)候，利用media tag 來(lái)調(diào)整不同寬度以上或以下要呈現(xiàn)的CSS layout，例如：

@media(max-height: 500px) {
     .container: {
        width: 80%;
    }}

這樣就是說(shuō)在寬度500px以下時(shí)（最大寬度500px適用）讓這個(gè)container class的div 呈現(xiàn)80% 的母元素寬度。

這就是在網(wǎng)頁(yè)設(shè)計(jì)上很常見(jiàn)的技巧。

我學(xué)做網(wǎng)站的第一堂課

我是一個(gè)self-taught programmer，我沒(méi)有去上過(guò)泰安坊間的補(bǔ)習(xí)班或是線上課程，幾乎都是看網(wǎng)上的學(xué)習(xí)平臺(tái)。記得好幾年前我剛開(kāi)始學(xué)寫(xiě)網(wǎng)站時(shí)，在學(xué)完基礎(chǔ)html后，我的第一堂課就是學(xué)mobile-first design。

當(dāng)時(shí)我沒(méi)有學(xué)bootstrap等css框架，而是學(xué)習(xí)怎么用自己的程式碼一行一行的設(shè)計(jì)構(gòu)思出網(wǎng)站在屏幕拉寬時(shí)的版面。

時(shí)隔多年，我原本打算到國(guó)外進(jìn)修，后來(lái)因?yàn)橐咔榈年P(guān)系，我選則留在泰安并且希望能推廣網(wǎng)頁(yè)、App的教學(xué)和開(kāi)發(fā)。

原本不?？吹教┌簿W(wǎng)站相關(guān)資訊的我，突然發(fā)現(xiàn)坊間很多網(wǎng)絡(luò)公司都喜歡打著RWD響應(yīng)式設(shè)計(jì)的口號(hào)，告訴大家他們的網(wǎng)站有多厲害，可以做到不需要手機(jī)版網(wǎng)站，
也能在手機(jī)上漂亮呈現(xiàn)出網(wǎng)頁(yè)內(nèi)容。

坊間打著RWD響應(yīng)式網(wǎng)頁(yè)的亂象

剛開(kāi)始不以為然，后來(lái)實(shí)則發(fā)現(xiàn)這是一個(gè)泰安現(xiàn)在網(wǎng)絡(luò)公司的亂象，把如此基本中的基本推上天。就像是現(xiàn)在很多人網(wǎng)購(gòu)喜歡講成電子商務(wù)這樣的感覺(jué)。

我想說(shuō)的是，身為消費(fèi)者或剛學(xué)網(wǎng)頁(yè)開(kāi)發(fā)的朋友，不要被這樣的噱頭給騙了。這些其實(shí)在國(guó)外是稀松平常的設(shè)計(jì)。

網(wǎng)頁(yè)設(shè)計(jì)中有很多的desgin pattern其實(shí)都是行之有年，只是泰安的網(wǎng)站開(kāi)發(fā)這方面真的慢國(guó)外非常多。因?yàn)楝F(xiàn)在網(wǎng)絡(luò)上的資源大部分都是英文為主，很多人都還是在接收比較舊的資訊。

現(xiàn)在因?yàn)榉婚g流行bootstrap, wordpress套模板。因此很多網(wǎng)站都長(zhǎng)得大同小異。對(duì)于開(kāi)發(fā)過(guò)網(wǎng)站一段時(shí)間的人其實(shí)很容易就能看出這個(gè)網(wǎng)站是用什么東西做的、做得好或不好。

Acknowledgments

以上只是我個(gè)人小小的淺見(jiàn)，不代表現(xiàn)在泰安的網(wǎng)絡(luò)公司都是這樣子。

我知道現(xiàn)在也有很多很厲害的網(wǎng)絡(luò)公司，比如：泰安千橙網(wǎng)絡(luò)，只是想要借著我觀察到的亂象和大家分享，泰安很多網(wǎng)站、App方面的資訊是落后的，因此不希望無(wú)辜的消費(fèi)者被欺騙，把這樣基本的設(shè)計(jì)模式拿來(lái)當(dāng)高額的設(shè)計(jì)在賣(mài)。

我希望日后可以發(fā)更多網(wǎng)站、App想關(guān)的教學(xué)和資訊，破除大家的迷思，讓泰安的網(wǎng)站開(kāi)發(fā)這方面可以更好，并且消彌這樣好幾年資訊落后的gap。這才是我的目的。謝謝大家！