電腦版的**昨晚做完了，今天趕著做手機端的，提到手機端的**第乙個想到的就是要 適應不同手機螢幕的寬度，保證在不同手機上都能正常顯示給使用者，我之前做這類**都是無腦引進bootstrap的。但前乙個專案做完之後我發現bootstrap雖好，但裡面的各種樣式我利用的很少，最多用到它排版，當**最後上傳的時候你會發現，即使壓縮之後，它也會占用相當大的一部分，所以這次我想自己用原生寫，響應式開發（我現在知道的尚淺）目前我了解有
1.百分比法：
顧名思義，頁面的元素的margin，padding，width，height，等等都用%來計算，css中的百分比中的百指的是什麼，指的是父元素，所有百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是百，子元 素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那麼父元素的高是百。所以body預設寬度是螢幕寬度 （pc中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，複雜的頁面實現很困難。
2.**查詢：
這個是css3中給出的，我們要解決的問題是適應手機螢幕，這個**查詢正是為解決這個問題而生，**查詢的功能就是為不同的**設定不同的css樣 式，這裡的「**」包括頁面尺寸，裝置螢幕尺寸等，最常用的形式
phone:@media screen and (max-width：767px)
pad：@media screen and (max-width：991px)and(min-width:768)
pc:@media screen and (min-width：992px)
...（你還可以設定更多節點）
用**查詢的話要保證每個畫素下都有對應的適配效果顯然你要設定更小的寬度範圍；
3.還有就是css3的單位rem：
rem就是將根節點html的font-size的值作為整個頁面的基準尺寸，例如那麼1rem=10px;如何做到適配呢？那就要用到js在頁面載入時獲取window的寬度（瀏覽器視窗的寬度）$(window).width();在開發手機頁面的時候，一般我們設定最大寬度為640px，因為640px可以保證在至今最寬的手機上顯示時網頁兩端剛好貼合螢幕，那接下來我就舉乙個小例子。
螢幕放大縮小這三個div也同樣還在一行等比放大縮小
html
123
css
注意這裡有乙個小坑，當你把這個小demo拿到谷歌瀏覽器裡面驗證的時候，你會發現開始這3個div會隨著你瀏覽器視窗縮小而縮小，到達某個值後就不動了，原因是谷歌瀏覽器預設支援html的font-size最小值為10px;在小於這個值就不會再小了，這是我當時碰到的問題花了快兩個小時上網找，一遍遍演示也都沒想明白，最後終於查到這麼個非人為原因.用rem來做響應式開發
demo 由於這個專案我設定了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的解析度或者通過手機訪問看看效果。基本上在不同解析度下都是差不多的展示效果，而且在手機移動終端下都是100 的撐開。這種響應式的效果，我想應該是最符合現在移動終端多樣化的需求的，如果只是做幾個特別適應的...
用rem來做響應式開發
demo 由於這個專案我設定了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的解析度或者通過手機訪問看看效果。基本上在不同解析度下都是差不多的展示效果，而且在手機移動終端下都是100 的撐開。這種響應式的效果，我想應該是最符合現在移動終端多樣化的需求的，如果只是做幾個特別適應的...
用rem實現響應式頁面開發
rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em font size of the element 是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴...