鄙人最近才剛剛開始學習一些關於移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。
顧名思義響應式頁面就是能做出響應的頁面，它的頁面效果不是定死的，會隨著使用者的改變而改變。
如何著手響應式有以下幾個思考的方向
找乙份設計圖
使用media query
隱藏元素
新增meta viewport
明白手機端互動方式的區別
是什麼media query 翻譯過來就是媒介查詢，媒介就是我們檢視這個網頁的裝置。
媒介查詢源於css3，它可以根據使用者的裝置所具有的某些特徵，來提供不同的樣式用於顯示。
引用方式
它的引用方式一共有兩種
媒介查詢的條件判斷的邏輯操作符只有and,only,not三種，多個判斷條件用()包裹後操作符隔開。
//當媒介最大寬度為800px且是橫屏時裡面的樣式生效
@media (max-width: 800px) and (orientation: landscape)
目前web前端開發專案型別可以分為兩種方式，mobile first 和 desktop first。mobile first就是優先開發移動端後開發pc端，後者反之。
不同的fist中我們media query針對的也不同，mobile first中，因為我們以移動端為主，所以我們的media query應該是針對pc的條件去控制，desktop fist則針對移動端設定條件樣式。
這裡就用到了一開始所說隱藏
現在，你已經寫好了你的響應式網頁，那麼已經可以了嗎？
別急，你離完成僅剩最後一步。
由於歷史的原因，我們的手機在訪問網頁時，不管你是響應式網頁還是非響應式，瀏覽器都會將你的寬度改為980px。
這是歷史遺留的問題，因為最早的智慧型手機為了完整的顯示乙個網頁，直接將pc上的網頁縮放塞進手機瀏覽器中，經過調研，發現大部分的網頁都是980px左右，所以當我們用手機訪問網頁時寬度都會被縮放到980px。
我們只需要加上這樣一行**就可以解決問題
width=device-width設定頁面寬度為裝置寬度。
user-scalable=no不允許使用者縮放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0最大最小預設縮放比例都為1。
這樣我們的響應式網頁才完全生效了。
沒有hover
有touch
沒有滾動條
沒有ie
沒有resize
因為移動端是沒有hover事件的所以當我們在需要相容移動端的頁面中應該盡量少用hover事件。
移動端一般很少監聽click事件，都是以touch事件為主，js沒有滑動事件，但是可以通過touch事件模擬
沒有ie意味著我們可以為所欲為放飛自我，使用最新的css和html。
當我們需要給不同的裝置顯示不同網頁（樣式）時，為什麼不可以一開始就寫好多個網頁再由後端負責根據使用者裝置來跳轉呢？
我們寫響應式需要思考非常多的問題，在乙個頁面裡html css需要考慮很多判斷邏輯，這些多出來**以及設計的時間可能已經能夠寫乙個新的網頁，那為什麼不一開始就寫兩個網頁就好了呢？
確實，現在大部分互聯公司現在幾乎都不會去使用響應式頁面。
國內大型公司可以說基本上都是非響應式網頁，只有那些互動性較弱比如個人blog，小型企業站點以展示內容為主的**還會應用響應式設計。
在了解rem之前需要先知道
rem是眾多number單位中的其中乙個，它的值為根元素font-size的值。
hello
word
!!
body標籤設定了40px，所以body裡面的內容應該都是40px。但是由於p在後面優先設定了2rem，瀏覽器的預設font-size為16px，也就是html標籤的font-size就是16px，所以現在的hello是32px。
也就是說rem的根元素的值指的就是html的font-size的值。
上面扯了那麼多介紹rem，那肯定是有用的。
別急，讓我細細道來。
當我們拿到設計稿，需要寫乙個手機用的網頁時。
我們是希望在所有的手機上看到的頁面都是乙個樣子的，頁面內每個元素在固定的位置。但是按照常規方法，乙個樣式能做到讓所有手機完美（90%）還原設計稿的樣子嗎？
答曰：可以，用media寫響應式，針對不同的裝置寬度，展現不同的樣式。
好的，那讓我們開啟開發者工具模擬手機看看。
看到這些你還想用media嗎？你要寫多少個media？光是乙個iphone就可以搞死你更別說還有一堆的國產機等著你適配。
那怎麼辦呢，有沒有辦法可以讓乙個css適應「所有」的手機呢？
辦法肯定有，那就是自適應，我們不需要知道使用者的手機的長寬是多少，我們讓網頁自己匹配使用者的手機長寬就好了啊。
自適應布局
自適應布局有下面兩種常規方法
這兩個布局乙個百分乙個比例看上去意思是一樣，其實不然。百分比布局中的寬度樣式不是乙個具體的值，而縮放是在已知寬度的情況下定死的值。
/*device-width = 320*/
body
body
現在只是在寬度為320px的手機上展現了1/2的效果，那麼當我們的手機是寬度300px的時候呢？
/*device-width = 300*/
body
body
那麼百分比布局能解決問題嗎？
不行，百分比布局有個缺陷，高度是未知的，因為高度沒有辦法百分比，如果定死了高度那麼就沒有辦法與寬度適應了。一旦我們的頁面一複雜，未知的高度會帶來更多的問題。
總的來說我們的頁面需要靠寬度適配，再用這個寬度來決定自身的高度以達到寬高都成比例，在不同的手機上都可以按同樣的比例展現。
那有什麼方法可以準確獲取手機的寬度嗎？
這時我們的英雄登場了，rem。
上面說到rem是根元素font-size的值，那麼我們只需要將根元素html的font-size為手機的寬度，這時不就可以通過rem來設定有比例的寬高樣式了嗎。
動態rem demo
js**就兩行，將rem設定為手機寬度的的10%，雖然設定width / 100可以完全模擬vw（自適應不用vw是因為vw相容性太差了），但是當em為1%時，一但寬度小於120px時，font-size就會小於12px，低於chrome預設的最小font-size就會出現bug，所以我們設定rem為10%。
還需要注意的是雖然width和height是用rem使用，但是不代表別的大小也需要用rem（如果字型的font-size也用rem，那當寬度很小時，字會小的看不清），我們應該搭配別的單位以獲得更美觀的效果。
為了減少我們計算量，我們可以直接使用scss寫乙個function幫我們解決轉換的問題。
@function px( $px )
$designwidth : 640。
.box
開發移動端頁面和響應式布局
開發移動端頁面和響應式布局 響應式布局 響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容 多個終端，而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。由於響應式布局要針對不同的視口尺寸，對樣式作出更多的修改，因此並不像流...
移動端（響應式）
查詢 mdn stylesheet media max width 800px href example.css 複製 mobile first原則 響應式設計最好mobile first原則優先，不過pc first也可以，只不過現在一半以上的使用者都是用手機在訪問頁面 為實現響應式，可以根據不同...
移動WEB響應式設計
pc上的web頁面在手機移動端等裝置上顯示要加入meta標籤中的viewport對頁面進行渲染，否則排版出現錯亂。width 設定布局viewport的特定值 device width 裝置寬度initial scale 設定頁面的初始縮放minumum scale 最小縮放maximum scal...