移動端開發的簡單適配方案

現在是移動端的天下啊，但是在做移動端開發的時候會遇到很多坑，適配是必須要做的，這裏總結一下自己平時寫移動端頁面的兩種簡單處理辦法，希望能夠幫到大家：

第一種：利用js來計算不同設備中的文字大小

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

以上代碼中如果設計稿是750的記得把6.4改成7.5

第二種及時利用媒體查詢來設置

html {
  font-size: 100px;
  background-color: #f9f9f9;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 50px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 56.25px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 58.59375px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 62.5px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 64.6875px;
  }
}
@media screen and (min-width: 440px) {
  html {
    font-size: 68.75px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 75px;
  }
}
@media screen and (min-width: 520px) {
  html {
    font-size: 81.25px;
  }
}
@media screen and (min-width: 560px) {
  html {
    font-size: 87.5px;
  }
}
@media screen and (min-width: 600px) {
  html {
    font-size: 93.75px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 680px) {
  html {
    font-size: 106.25px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 112.5px;
  }
}
@media screen and (min-width: 760px) {
  html {
    font-size: 118.75px;
  }
}
@media screen and (min-width: 800px) {
  html {
    font-size: 125px;
  }
}
@media screen and (min-width: 960px) {
  html {
    font-size: 150px;
  }
}

其實這兩種辦法只是簡單的處理，如果要更好的處理，大家可以參考各大網站的方式，如：淘寶，網易等。

這是文字的適配，在正常些樣式的時候設計稿的真是尺寸一半即爲我們需要用到的尺寸。

這只是說了文字的適配，移動端的適配要想做到更好，最爲重要的就是圖片的適配，這裏就不多說，大家有興趣可以自行google。