摘要：一思考在移動(dòng)端越來(lái)越重要的背景下，每位開(kāi)發(fā)者對(duì)移動(dòng)適配都有自己的想法。這個(gè)和移動(dòng)端的設(shè)計(jì)體驗(yàn)方式是比較像的。對(duì)移動(dòng)端的特殊性進(jìn)行適配，如問(wèn)題，默認(rèn)樣式等。

一、思考
在移動(dòng)端越來(lái)越重要的背景下，每位web開(kāi)發(fā)者對(duì)移動(dòng)適配都有自己的想法。是移動(dòng)優(yōu)先，還是PC優(yōu)先，還是兩者兼得？在實(shí)際開(kāi)發(fā)中這個(gè)問(wèn)題是和項(xiàng)目產(chǎn)品定位有關(guān)的，也涉及到UI的設(shè)計(jì)，不是開(kāi)發(fā)者能決定。但不管產(chǎn)品如何定位，作為開(kāi)發(fā)者總是要提供最優(yōu)的解決方案，是用一套樣式還是多套樣式？網(wǎng)上一搜，有靜態(tài)布局、流式布局，響應(yīng)式布局，自適應(yīng)布局，彈性布局等一堆，云里霧里，到底要怎么選呢？看完這篇文章相信心中就有數(shù)了。

二、viewport的使用
1、最常見(jiàn)的設(shè)置，大多數(shù)的框架（如bootstrap）和知名的站點(diǎn)基本是這個(gè)配置

2、這個(gè)配置重點(diǎn)在width=device-width，就是讓視窗口等于設(shè)配寬度，也就是我們開(kāi)發(fā)中能用document的寬度，其它幾個(gè)“初始縮放大小”“最大縮放大小”“最小縮放大小”和“是否允許用戶縮放”可以理解為用來(lái)“固定”這個(gè)設(shè)置不被破壞的。
3、這個(gè)設(shè)置很簡(jiǎn)單，但同時(shí)也會(huì)帶來(lái)一些需要解決的問(wèn)題。
a、現(xiàn)在的手機(jī)都是兩倍三倍的Retina高清屏，1px實(shí)際的效果是不止一個(gè)像素的，對(duì)不同的設(shè)備設(shè)置不同
的initial-scale可以有比較好的效果，比如在2倍Retina的iphone6(6s,7,8)中設(shè)置為0.5。一旦
動(dòng)態(tài)設(shè)置這個(gè)，也就意味這視窗口不同了，需要不同樣式適配。這也是分配樣式的一套基準(zhǔn)，如何分配樣式
后面會(huì)有更詳細(xì)的講解。
b、在PC端如果有最小寬度的限制，同樣需要配置不同的width值。

三、單位的使用
1、css中單位很多，這里只介紹最常用的幾種：
(1) px:這個(gè)可以理解為“基準(zhǔn)”單位，就是不管在什么設(shè)備中其值是不會(huì)變的，就像cm,kg這些一樣
(2) em:這個(gè)是相對(duì)父容器的單位，一般用在字體font-size中比較好。如父容器font-size為16px,則

  1em=16px

(3) rem:相對(duì)于根元素html的單位，如html的font-size為16px,則1rem=16px
(4) vw/vh: 視口寬高為100vw/100vh,這個(gè)和百分比類似，只是百分比是相對(duì)于父容器，其相對(duì)于視口
2、移動(dòng)適配最常用的應(yīng)該是rem,很多框架和淘寶的flexible適配都是基于這個(gè)單位，而自己做的話，一般
在首頁(yè)加載時(shí)全局js設(shè)置html的font-size即可，代碼如下：

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      //這里根據(jù)設(shè)計(jì)稿為750，設(shè)置1rem=100px,
      docEl.style.fontSize = 100 * (clientWidth / 375) + "px";
    };

  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

3.如果用了sass/less等預(yù)編譯語(yǔ)言可以更靈活的配置的，在上面方法內(nèi)配置（設(shè)計(jì)稿為750的情況下）：
docEl.style.fontSize = 40 * (clientWidth / 750) + "px";
在編譯函數(shù)中配置：
@function px2rem($px, $base-font-size: 20px) {

  @return ($px / $base-font-size) * 1rem;
}

這樣我們就可以直接使用設(shè)計(jì)稿的尺寸，如：px2rem(100px)，省去了自己計(jì)算，如果沒(méi)用預(yù)編譯語(yǔ)言（推
薦使用），編輯器也有插件支持單位轉(zhuǎn)化。
4.上面是基于屏幕寬度來(lái)設(shè)置根元素font-size,如果設(shè)置不同的initial-scale，我們需要基于設(shè)備像素比設(shè)置，通過(guò)window.devicePixelRatio獲取。

四、頁(yè)面布局方式
1.理解html的文檔流方式，其實(shí)就是流式布局，即橫向需要我們?cè)O(shè)置，縱向自動(dòng)疊加。這個(gè)和移動(dòng)端的設(shè)計(jì)體驗(yàn)方式是比較像的。在寬度中就要用自適應(yīng)的方式，如百分比，有設(shè)置相對(duì)單位的，可用相對(duì)單位，靈活使用，css3的display:flex也是很好的選擇，現(xiàn)代瀏覽器和移動(dòng)設(shè)備基本都支持了。
2.剛才說(shuō)到體驗(yàn)，很明顯移動(dòng)端和pc端的體驗(yàn)真的很不同，所以光有上面的自適應(yīng)是遠(yuǎn)遠(yuǎn)不夠，是不是需要對(duì)這兩個(gè)完全不同的體驗(yàn)方式響應(yīng)不同的布局和樣式。

五、媒體查詢
1.我們除了可以用js來(lái)判斷不同的設(shè)備，設(shè)置相對(duì)單位所用的根元素。另一個(gè)強(qiáng)大的方式是可以通過(guò)css3強(qiáng)大的媒體查詢來(lái)指定不同的樣式。
2.媒體查詢的規(guī)則

@media all and ([min-width|max-width|orientation|min-device-width|...]) { ... }

中括號(hào)[]中表示需要添加的條件,可匹配寬高/橫豎屏/設(shè)備類型等，比如min-width:750px,表示最小寬度為750px,{}是在匹配模式下的樣式。也有邏輯判斷and/or/not連接不同的規(guī)則
3.要是引入整個(gè)文件，可以在link標(biāo)簽中使用

表示：當(dāng)屏幕大于或等于900px時(shí)，將采用big.css樣式來(lái)渲染W(wǎng)eb頁(yè)面。
4.Bootstrap響應(yīng)式設(shè)計(jì)這類柵格布局采用的就是這套方式。

六、1px像素邊框問(wèn)題
1.除了上面說(shuō)到在viewport中設(shè)置縮放外，直接設(shè)置一個(gè)空元素縮放也是可以的

p{
    width: 100px;
      height: 1px;
    background: red;
    display: block;
    transform: scaleY(.5);
}

不足：圓角無(wú)法實(shí)現(xiàn)，實(shí)現(xiàn)4條邊框比較麻煩，并且只能多帶帶實(shí)現(xiàn)，如果嵌套，會(huì)對(duì)包含的效果產(chǎn)生不想要的效果，所以此方案配合:after和before獨(dú)立使用較多
2.利用CSS對(duì)陰影處理的方式實(shí)現(xiàn)0.5px的效果

box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

不足：顏色不好處理， 黑色 rgba(0,0,0,1) 最深的情況了。有陰影出現(xiàn)，不好用大量使用box-shadow可能會(huì)導(dǎo)致性能瓶頸。四條邊框?qū)崿F(xiàn)效果不理想。
3.圖片實(shí)現(xiàn)，使用 background-image 實(shí)現(xiàn)1px有兩種方式: 漸變 linear-gradient 或直接使用圖片(base64)。漸變 linear-gradient (50%有顏色，50%透明)

div{
    height: 1px;
    background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 1px;
}

不足：大量使用漸變可能導(dǎo)致性能瓶頸，代碼量大，多背景圖片有兼容性問(wèn)題

七、圖片高清化
1.可以使用srcset屬性設(shè)置，使用看https://www.zhangxinxu.com/wo...
2.背景圖高清
a.使用上面介紹的媒體查詢，如：

/* 普通顯示屏(設(shè)備像素比例小于等于1)使用1倍的圖 */
  .css{
      background-image: url(img_1x.png);
  }

  /* 高清顯示屏(設(shè)備像素比例大于等于2)使用2倍圖  */
  @media only screen and (-webkit-min-device-pixel-ratio:2){
      .css{
    background-image: url(img_2x.png);
      }
  }

  /* 高清顯示屏(設(shè)備像素比例大于等于3)使用3倍圖  */
  @media only screen and (-webkit-min-device-pixel-ratio:3){
      .css{
    background-image: url(img_3x.png);
      }
  }

b.image-set 實(shí)現(xiàn)高清化

.css {
      background-image: url(1x.png);    /*不支持image-set的情況下顯示*/
      background: -webkit-image-set(
        url(1x.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */
        url(2x.png) 2x,/* 支持image-set的瀏覽器的[2倍Retina屏幕] */
        url(3x.png) 3x/* 支持image-set的瀏覽器的[3倍Retina屏幕] */
      );
  }

c.很多網(wǎng)頁(yè)端對(duì)圖片的要求還是沒(méi)那么高的，不像app那樣，圖片一般用一張2倍高清圖就行，最新的設(shè)備對(duì)以上屬性的支持還是可以的，對(duì)于要求高的應(yīng)用使用

八、移動(dòng)端click屏幕產(chǎn)生300ms的延時(shí)響應(yīng)
1.原因：在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候，例如跳轉(zhuǎn)鏈接，此處瀏覽器會(huì)先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會(huì)先Hold一段時(shí)間t，如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會(huì)做單擊跳轉(zhuǎn)鏈接的處理，如果t時(shí)間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會(huì)禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對(duì)該部分區(qū)域頁(yè)面的縮放操作。那么這個(gè)時(shí)間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來(lái)。造成的后果用戶純粹單擊頁(yè)面，頁(yè)面需要過(guò)一段時(shí)間才響應(yīng)，給用戶慢體驗(yàn)感覺(jué)，對(duì)于web開(kāi)發(fā)者來(lái)說(shuō)是，頁(yè)面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。
2.解決方案：
（1）使用fastclick.js,只要全局加入該文件并設(shè)置如下：

FastClick.attach(document.body);

(2) zepto的touch模塊，tap事件也是為了解決在click的延遲問(wèn)題

九、更改默認(rèn)樣式

//使用appearance改變webkit瀏覽器的默認(rèn)外觀
input,select { -webkit-appearance:none; appearance: none; }

//winphone下，使用偽元素改變表單元素默認(rèn)外觀
//1.禁用select默認(rèn)箭頭，::-ms-expand修改表單控件下拉箭頭，設(shè)置隱藏并使用背景圖片來(lái)修飾
select::-ms-expand { display:none; }

//2.禁用radio和checkbox默認(rèn)樣式，::-ms-check修改表單復(fù)選框或單選框默認(rèn)圖標(biāo)，設(shè)置隱藏并使用背景圖片來(lái)修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表單輸入框默認(rèn)清除按鈕，::-ms-clear修改清除按鈕，設(shè)置隱藏并使用背景圖片來(lái)修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
// 禁止長(zhǎng)按鏈接與圖片彈出菜單
a,img { -webkit-touch-callout: none }    

// 禁止ios和android用戶選中文字
html,body {-webkit-user-select:none; user-select: none; }

// 改變輸入框placeholder的顏色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

// android上去掉語(yǔ)音輸入按鈕
input::-webkit-input-speech-button {display: none}

十、總結(jié)
1.網(wǎng)站適配的終端可以用js或媒體查詢的方式獲取，分配對(duì)應(yīng)的樣式。
2.布局上采用相對(duì)單位,百分比和flex的彈性方式。
3.對(duì)移動(dòng)端的特殊性進(jìn)行適配，如1px問(wèn)題，默認(rèn)樣式等。