摘要：當(dāng)媒介最大寬度為且是橫屏?xí)r里面的樣式生效目前前端開(kāi)發(fā)項(xiàng)目類型可以分為兩種方式，和。這樣我們的響應(yīng)式網(wǎng)頁(yè)才完全生效了。移動(dòng)端特點(diǎn)移動(dòng)端特點(diǎn)沒(méi)有有沒(méi)有滾動(dòng)條沒(méi)有沒(méi)有因?yàn)橐苿?dòng)端是沒(méi)有事件的所以當(dāng)我們?cè)谛枰嫒菀苿?dòng)端的頁(yè)面中應(yīng)該盡量少用事件。

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

響應(yīng)式

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

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

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

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

Media Query

是什么

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

用法

引用方式

它的引用方式一共有兩種

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

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

條件判斷

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

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

Mobile First

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

不同的Fist中我們Media Query針對(duì)的也不同，Mobile First中，因?yàn)槲覀円砸苿?dòng)端為主，所以我們的Media Query應(yīng)該是針對(duì)PC的條件去控制，Desktop Fist則針對(duì)移動(dòng)端設(shè)置條件樣式。

Mobile First Demo

這里就用到了一開(kāi)始所說(shuō)隱藏

meta viewport

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

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

這是歷史遺留的問(wèn)題，因?yàn)樽钤绲闹悄苁謾C(jī)為了完整的顯示一個(gè)網(wǎng)頁(yè)，直接將PC上的網(wǎng)頁(yè)縮放塞進(jìn)手機(jī)瀏覽器中，經(jīng)過(guò)調(diào)研，發(fā)現(xiàn)大部分的網(wǎng)頁(yè)都是980px左右，所以當(dāng)我們用手機(jī)訪問(wèn)網(wǎng)頁(yè)時(shí)寬度都會(huì)被縮放到980px。

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

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

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

移動(dòng)端特點(diǎn)

1. 沒(méi)有hover
2. 有touch
3. 沒(méi)有滾動(dòng)條
4. 沒(méi)有IE
5. 沒(méi)有resize

因?yàn)橐苿?dòng)端是沒(méi)有hover事件的所以當(dāng)我們?cè)谛枰嫒菀苿?dòng)端的頁(yè)面中應(yīng)該盡量少用hover事件。
移動(dòng)端一般很少監(jiān)聽(tīng)click事件，都是以touch事件為主，JS沒(méi)有滑動(dòng)事件，但是可以通過(guò)touch事件模擬
沒(méi)有IE意味著我們可以為所欲為放飛自我，使用最新的CSS和HTML。

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

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

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

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

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

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

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

在了解rem之前需要先知道

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

什么是rem？

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

  
hello
  word
  
!!

因?yàn)榻obody標(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。

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

rem有什么用？

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

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

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

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

• 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嗎？你要寫(xiě)多少個(gè)media？光是一個(gè)iPhone就可以搞死你更別說(shuō)還有一堆的國(guó)產(chǎn)機(jī)等著你適配。

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

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

自適應(yīng)布局

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

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

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

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

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

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

如果是百分比布局是不是不需要改動(dòng)，而按比例布局需要改動(dòng)。

那么百分比布局能解決問(wèn)題嗎？

不行，百分比布局有個(gè)缺陷，高度是未知的，因?yàn)楦叨葲](méi)有辦法百分比，如果定死了高度那么就沒(méi)有辦法與寬度適應(yīng)了。一旦我們的頁(yè)面一復(fù)雜，未知的高度會(huì)帶來(lái)更多的問(wèn)題。

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

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

這時(shí)我們的英雄登場(chǎng)了，rem。

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

rem怎么用？

動(dòng)態(tài)REM demo

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

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

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

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

為了減少我們計(jì)算量，我們可以直接使用scss寫(xiě)一個(gè)function幫我們解決轉(zhuǎn)換的問(wè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;
}