關於響應式頁面

作為乙個無線部門的人，不懂移動裝置是不行的。而作為乙個無線的重構

，不會寫響應式

頁面更是不行得。而我，乙個無線的重構

，在我最近做的乙個移動端的專案之前，的確是不會寫響應式

頁面的，所以，嚴格來說，在這個專案之前，我是乙個不合格的無線重構

人。而這個專案，卻讓我快速地掌握了響應式頁面重構的一些方法。下面就是通過這個專案來總結我在響應式頁面重構學到的東西。

眾所周知，所謂響應式頁面，就是能夠用一套樣式，使你的頁面能夠在不同解析度的螢幕下都有很好的表現形式。響應式web設計，這個概念是ethan marctte 在a list apart 發表的一篇文章「responsive web design」中援引響應式建築而得名：

響應式建築（responsive architecture），物理空間應該可以根據存在於其中的人的情況進行相應。

（fluid grid），所謂的流體布局

，其實就是在你pc端實現的頁面基礎上，將一些元素的寬高由原來的固定多少畫素（px）調整為百分比（%）或字型比例（em）（或布局方面的margin、padding、left、top等以px為單位的值），這也是當前實現響應式布局的兩種主要實現方法。

第一種用百分比（%），就是以該元素的父容器的寬高為100%，其他元素的寬高相對於其父容器的比例，只要將具體的畫素值相對於他的父容器的乙個百分比折算即可。當然這種方法的換算有點複雜，因為很多相對的寬高折算的百分比係數是帶小數的，所以這時候可能要你有足夠的耐心才能實現。

在ethan marctte的responsive web design這篇文章中給出的乙個demo中，我們可以看到他的實際**裡：12

345@mediascreenand (max-width:400px)

第二種方法是用字型大小比例（em）去實現，其實方法是跟上面一樣的，只不過我們將%換成了em，這種方法就是某元素具體的寬高（px）在當前基準字型大小（font-size）下折算出多少個em。eg： 乙個在480解析度下寬高為64px*64px的元素，其父容器的字型大小（font-size）為20px，那麼它折算成em為單位就是3.2em*3.2em。當其父容器字型大小基準根據不同的解析度變化的時候，該元素的寬高也能根據這個字型大小基準成比例的縮放，就能實現響應式變化。

從上面的兩張例項圖我們可以看到，同乙個元素，寬高為3.2em*3.2em，在360px解析度下，因為基準字型大小為15px，故解析出來的實際尺寸為48px*48px，而在480px解析度下，基準字型大小為20px，故實際的尺寸為64px*64px。

3、流體（liquid image），在我所了解的很多資料中，對處理這塊，如果要使能根據解析度來適應，而且還不失真，好像挺困難的。但其實我們不用考慮的那麼複雜，我們要做的只是讓能根據不同解析度自適應罷了，我們不管會不會因為被拉伸而失真，因為真的遇到這樣的情況，我們可以考慮在不同解析度下使用不同的，這樣就簡單多了。所以讓尺寸自適應，我們只要不給設定具體的寬高尺寸，只要在樣式中給該乙個width：100%，這樣就能根據它父容器的尺寸自動調整了。

4、**查詢（media query），這個也是響應式頁面的乙個關鍵技術，根據不同的解析度去調整一些不同的樣式。12

345@mediascreenand (max-device-width:480px)

}

通過上面的這樣**查詢結構，我們可以設定在不同解析度下選用不同的樣式來調整響應式頁面。像前面第二點流體布局上，我們使用百分比或字型大小比例去實現流體布局的時候，第一種方法是可以不用**查詢直接實現流體布局的，就是元素的寬高能自適應不同解析度螢幕。

但第二種方法用字型大小比例（em）去實現流體布局的時候，我們就必須要結合**查詢了，因為我們的字型大小比例是根據基準字型大小來實現的，就是說在基準字型大小一定的情況下，該元素的大小就是固定的，而我們要實現該元素尺寸自適應，就只能通過調整基準字型大小來實現了。

通過**查詢，我們可以讓在基準字型大小font-size在不同解析度下不一樣，這樣其子元素相對於該字型大小的比例em算出來的畫素px就不一樣了，這樣就能實現響應式了。

所以我們相容不同的解析度的時候，可以先在某個解析度下，實現完美的重構，然後將所有元素具體的尺寸（px）折算為em（根據父容器的font-size），然後再通過**查詢，調整不同解析度下的基準字型大小font-size就能實現具體的響應式了。

當然**查詢的功能是根據不同的解析度適配不同的樣式，我們可以通過上面的做法是實現流體布局，還可以通過**查詢來細調具體的頁面在不同解析度下的不同表現形式。

在我具體的專案過程中，採用**查詢主要是調整不同解析度下的基準字型大小的大小，具體如下面的**所示：12

3456

789body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox

/* for 800 px width screen */

@media onlyscreenand (max-device-width:800px),onlyscreenand (max-width:800px)

}

/* for 720 px width screen */

@media onlyscreenand (max-device-width:720px),onlyscreenand (max-width:720px)

}

前面設定通用字型大小為20px，當解析度超過我**查詢到的最大螢幕寬度的時候就適配該基準字型大小，下面分別通過**查詢為解析度為800px和720px的裝置詳細調整基準字型大小，（當然在這裡你可以增加更多的樣式去調整不同解析度下的具體表現）使頁面在兩個解析度下都能有比較好的表現。可以發現，在800px的解析度裝置中，我的基準字型大小設定為33.34px，在720px的解析度裝置下的基準字型大小為30px。

為什麼在800px解析度下基準字型大小就為33.34px，在720px解析度下基準字型大小為30px呢，這是因為我是先以480px解析度下基準字型大小為20px去實現的，那麼在800px或720px下的基準字型大小就根據裝置解析度的比例去算出。 這裡只給出兩個解析度的例子，其他不同解析度下的實現方法一樣。

通過上面的幾點關鍵技術，我們就可以實現具體的響應式頁面了。看完這篇文章，是不是覺得響應式頁面其實也沒有想象中那麼難呢？那麼，有空自己去試試吧，只有自己動手實現後才能真正理解其中的奧秘哦！！！

響應式頁面設計

響應式頁面 1 viewport檢視 首先在頭部插入 其中，width 控制viewpoint的寬度，可以是固定值，也可以是device width，即裝置的寬度。2 呼叫不同的css檔案 在不同頁面大小下頁面由不同的css控制，這時候需要用 這表示頁面寬度如果在614 810px，就呼叫外部的in...

關於響應式頁面的幾種處理方法

做響應式最簡單方便的就是用現成的框架或者ui庫，常見的有bootstrap elementui layui等等，這裡拿bootstrap來舉例 1.柵格系統 大部分框架都有柵格系統，我們可以根據這個直接來規定不同裝置上的布局，省去了很多手寫的麻煩。超小螢幕 手機 768px 小螢幕 平板 768px...

響應式頁面設計思路

最近在頁面設計中偶然發現，頁面放縮後的效果完全扭曲，後來仔細思考下，原來是響應式頁面設計理念沒有整合進去，下面從別人那邊摘錄一篇響應式設計思路介紹文章，以後要多點考慮響應式設計。作為乙個無線部門的人，不懂移動裝置是不行的。而作為乙個無線的重構，不會寫響應式頁面更是不行得。而我，乙個無線的重構，在我最...