摘要：當(dāng)媒介最大寬度為且是橫屏?xí)r里面的樣式生效目前前端開發(fā)項目類型可以分為兩種方式，和。這樣我們的響應(yīng)式網(wǎng)頁才完全生效了。移動端特點移動端特點沒有有沒有滾動條沒有沒有因為移動端是沒有事件的所以當(dāng)我們在需要兼容移動端的頁面中應(yīng)該盡量少用事件。

鄙人最近才剛剛開始學(xué)習(xí)一些關(guān)于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。

響應(yīng)式

什么是響應(yīng)式頁面呢？

顧名思義響應(yīng)式頁面就是能做出響應(yīng)的頁面，它的頁面效果不是定死的，會隨著用戶的改變而改變。

如何著手響應(yīng)式有以下幾個思考的方向

1. 找一份設(shè)計圖
2. 使用Media Query
3. 隱藏元素
4. 添加meta viewport
5. 明白手機端交互方式的區(qū)別

Media Query

是什么

Media query 翻譯過來就是媒介查詢，媒介就是我們查看這個網(wǎng)頁的設(shè)備。
媒介查詢源于CSS3，它可以根據(jù)用戶的設(shè)備所具有的某些特征，來提供不同的樣式用于顯示。

用法

引用方式

它的引用方式一共有兩種

• 元素中媒介查詢
• 樣式表中媒介查詢

在link中使用媒介查詢后，即使不滿足樣式條件，這個樣式文件依然會被下載。

條件判斷

媒介查詢的條件判斷的邏輯操作符只有and, only, not三種，多個判斷條件用()包裹后操作符隔開。

//當(dāng)媒介最大寬度為800px且是橫屏?xí)r里面的樣式生效
@media (max-width: 800px) and (orientation: landscape){
    ......
}

Mobile First

目前web前端開發(fā)項目類型可以分為兩種方式，Mobile First 和 Desktop First。Mobile First就是優(yōu)先開發(fā)移動端后開發(fā)PC端，后者反之。

不同的Fist中我們Media Query針對的也不同，Mobile First中，因為我們以移動端為主，所以我們的Media Query應(yīng)該是針對PC的條件去控制，Desktop Fist則針對移動端設(shè)置條件樣式。

Mobile First Demo

這里就用到了一開始所說隱藏

meta viewport

現(xiàn)在，你已經(jīng)寫好了你的響應(yīng)式網(wǎng)頁，那么已經(jīng)可以了嗎？
別急，你離完成僅剩最后一步。

由于歷史的原因，我們的手機在訪問網(wǎng)頁時，不管你是響應(yīng)式網(wǎng)頁還是非響應(yīng)式，瀏覽器都會將你的寬度改為980px。

這是歷史遺留的問題，因為最早的智能手機為了完整的顯示一個網(wǎng)頁，直接將PC上的網(wǎng)頁縮放塞進(jìn)手機瀏覽器中，經(jīng)過調(diào)研，發(fā)現(xiàn)大部分的網(wǎng)頁都是980px左右，所以當(dāng)我們用手機訪問網(wǎng)頁時寬度都會被縮放到980px。

我們只需要加上這樣一行代碼就可以解決問題

width=device-width設(shè)置頁面寬度為設(shè)備寬度。
user-scalable=no不允許用戶縮放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0最大最小默認(rèn)縮放比例都為1。

這樣我們的響應(yīng)式網(wǎng)頁才完全生效了。

移動端特點

1. 沒有hover
2. 有touch
3. 沒有滾動條
4. 沒有IE
5. 沒有resize

因為移動端是沒有hover事件的所以當(dāng)我們在需要兼容移動端的頁面中應(yīng)該盡量少用hover事件。
移動端一般很少監(jiān)聽click事件，都是以touch事件為主，JS沒有滑動事件，但是可以通過touch事件模擬
沒有IE意味著我們可以為所欲為放飛自我，使用最新的CSS和HTML。

為什么需要響應(yīng)式？

當(dāng)我們需要給不同的設(shè)備顯示不同網(wǎng)頁（樣式）時，為什么不可以一開始就寫好多個網(wǎng)頁再由后端負(fù)責(zé)根據(jù)用戶設(shè)備來跳轉(zhuǎn)呢？

我們寫響應(yīng)式需要思考非常多的問題，在一個頁面里html css需要考慮很多判斷邏輯，這些多出來代碼以及設(shè)計的時間可能已經(jīng)能夠?qū)懸粋€新的網(wǎng)頁，那為什么不一開始就寫兩個網(wǎng)頁就好了呢？

確實，現(xiàn)在大部分互聯(lián)公司現(xiàn)在幾乎都不會去使用響應(yīng)式頁面。

• 博客園：響應(yīng)式
• 百度：非響應(yīng)式
• 谷歌：非響應(yīng)式
• 淘寶：非響應(yīng)式
• 頭條：非響應(yīng)式
• 知乎：非響應(yīng)式

國內(nèi)大型公司可以說基本上都是非響應(yīng)式網(wǎng)頁，只有那些交互性較弱比如個人blog，小型企業(yè)站點以展示內(nèi)容為主的網(wǎng)站還會應(yīng)用響應(yīng)式設(shè)計。

動態(tài)REM自適應(yīng)

在了解rem之前需要先知道

• 瀏覽器的默認(rèn)font-size是16px
• Font-size最優(yōu)先用戶在瀏覽器中設(shè)置的大小，chrome默認(rèn)最小12px。

什么是rem？

rem是眾多number單位中的其中一個，它的值為根元素font-size的值。

  
hello
  word
  
!!

因為給body標(biāo)簽設(shè)置了40px，所以body里面的內(nèi)容應(yīng)該都是40px。但是由于p在后面優(yōu)先設(shè)置了2rem，瀏覽器的默認(rèn)font-size為16px，也就是html標(biāo)簽的font-size就是16px，所以現(xiàn)在的hello是32px。

也就是說rem的根元素的值指的就是html 的font-size的值。

rem有什么用？

上面扯了那么多介紹rem，那肯定是有用的。
別急，讓我細(xì)細(xì)道來。
當(dāng)我們拿到設(shè)計稿，需要寫一個手機用的網(wǎng)頁時。

我們是希望在所有的手機上看到的頁面都是一個樣子的，頁面內(nèi)每個元素在固定的位置。但是按照常規(guī)方法，一個樣式能做到讓所有手機完美（90%）還原設(shè)計稿的樣子嗎？

答曰：可以，用media寫響應(yīng)式，針對不同的設(shè)備寬度，展現(xiàn)不同的樣式。

好的，那讓我們打開開發(fā)者工具模擬手機看看。

• iPhone X : 375 x 812
• iPhone 6/7/8 Plus : 414 x 736
• iPhone 6/7/8 : 375 x 667
• iPhone 5/SE : 320 x 568
• Galaxy S5 : 360 x 640
• Pixel 2 : 411 x 731

看到這些你還想用media嗎？你要寫多少個media？光是一個iPhone就可以搞死你更別說還有一堆的國產(chǎn)機等著你適配。

那怎么辦呢，有沒有辦法可以讓一個CSS適應(yīng)“所有”的手機呢？

辦法肯定有，那就是自適應(yīng)，我們不需要知道用戶的手機的長寬是多少，我們讓網(wǎng)頁自己匹配用戶的手機長寬就好了啊。

自適應(yīng)布局

自適應(yīng)布局有下面兩種常規(guī)方法

• 百分比布局：寬度百分比。
• 縮放布局：按比例設(shè)置網(wǎng)頁寬高。

這兩個布局一個百分一個比例看上去意思是一樣，其實不然。百分比布局中的寬度樣式不是一個具體的值，而縮放是在已知寬度的情況下定死的值。

/*device-width = 320*/
body{
    width: 50%  /*160px*/
}
body{
    width: 160px /*160px*/
}

如果我們的目的是在手機上展現(xiàn)body占據(jù)屏幕一半的效果的話，上面兩種寫法在寬度為320px的手機上效果是一樣的，都是將body的寬度設(shè)置為手機的一半長。
現(xiàn)在只是在寬度為320px的手機上展現(xiàn)了1/2的效果，那么當(dāng)我們的手機是寬度300px的時候呢？

/*device-width = 300*/
body{
    width: 50%  /*150px*/
}
body{
    width: 150px /*150px*/
}

如果是百分比布局是不是不需要改動，而按比例布局需要改動。

那么百分比布局能解決問題嗎？

不行，百分比布局有個缺陷，高度是未知的，因為高度沒有辦法百分比，如果定死了高度那么就沒有辦法與寬度適應(yīng)了。一旦我們的頁面一復(fù)雜，未知的高度會帶來更多的問題。

總的來說我們的頁面需要靠寬度適配，再用這個寬度來決定自身的高度以達(dá)到寬高都成比例，在不同的手機上都可以按同樣的比例展現(xiàn)。

那有什么方法可以準(zhǔn)確獲取手機的寬度嗎？

這時我們的英雄登場了，rem。

上面說到rem是根元素font-size的值，那么我們只需要將根元素html的font-size為手機的寬度，這時不就可以通過rem來設(shè)置有比例的寬高樣式了嗎。

rem怎么用？

動態(tài)REM demo

    var width=document.documentElement.clientWidth;
    document.write(``)

JS代碼就兩行，將rem設(shè)置為手機寬度的的10%，雖然設(shè)置width / 100可以完全模擬vw（自適應(yīng)不用vw是因為vw兼容性太差了），但是當(dāng)em為1%時，一但寬度小于120px時，font-size就會小于12px，低于chrome默認(rèn)的最小font-size就會出現(xiàn)bug，所以我們設(shè)置rem為10%。

還需要注意的是雖然width和height是用rem使用，但是不代表別的大小也需要用rem（如果字體的font-size也用rem，那當(dāng)寬度很小時，字會小的看不清），我們應(yīng)該搭配別的單位以獲得更美觀的效果。

使用SCSS自動轉(zhuǎn)換px

為了減少我們計算量，我們可以直接使用scss寫一個function幫我們解決轉(zhuǎn)換的問題。

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}
$designWidth : 640。

.box{
  background: grey;
  width: px(256);
  height: px(128);
  margin: px(32) px(32);
  float: left;
}