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

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

第一種：利用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。