摘要：首先設(shè)置屬性，如下代碼使用如下代碼就能實(shí)現(xiàn)移動(dòng)端的適配相當(dāng)于瀏覽器的，是瀏覽器的內(nèi)部寬度，注意，滾動(dòng)條寬度也計(jì)算在內(nèi)那么就是表示的屏幕寬度。參考地址最簡單的移動(dòng)端適配方案實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)從淘寶和網(wǎng)易的思考移動(dòng)端怎樣使用

首先設(shè)置meta屬性，如下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

使用如下代碼就能實(shí)現(xiàn)移動(dòng)端的適配：

html {
  font-size: -webkit-calc(13.33333333vw);
  font-size: calc(13.33333333vw);
}

100vw相當(dāng)于瀏覽器的window.innerWidth，是瀏覽器的內(nèi)部寬度，注意，滾動(dòng)條寬度也計(jì)算在內(nèi)！那么1vw就是表示1%的屏幕寬度。

其中的13.33333333vw是怎么來的呢？就是你的設(shè)計(jì)稿是750px，那么設(shè)計(jì)稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是html的font-size設(shè)置為100px相當(dāng)于1rem（設(shè)計(jì)稿為750px）。那么我們就可以很輕松的換算設(shè)計(jì)稿中的單位為rem了，比如一個(gè)元素寬度為150px，轉(zhuǎn)換為rem就是1.5rem。其他尺寸設(shè)計(jì)稿的計(jì)算方式依次類推。

參考網(wǎng)易新聞移動(dòng)端的寫法：

/**
 * view-port list:
320x480
320x568
320x570
360x592
360x598
360x604
360x640
360x720
375x667
375x812
393x699
412x732
414x736
480x854
540x960
640x360
720x1184
720x1280
800x600
1024x768
1080x1812
1080x1920
 */
html {
  font-size: -webkit-calc(13.33333333vw);
  font-size: calc(13.33333333vw);
}
@media screen and (max-width: 320px) {
  html {
    font-size: 42.667px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 721px) and (max-width: 768px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 769px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
body {
  font-family: "PingFangSC-Regular", "Microsoft YaHei", Helvetica;
  color: #333333;
  background: #f5f7f9;
}
html a {
  color: #333333;
}

這樣寫法也是為了兼容老版本手機(jī)不支持vw以及calc語法。

參考地址：

• 《最簡單的移動(dòng)端適配方案(rem+vw)》
• 《CSS3 calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)》
• 《從淘寶和網(wǎng)易的font-size思考移動(dòng)端怎樣使用rem？》