首先设置meta属性，如下代码：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
使用如下代码就能实现移动端的适配：
html { font-size: -webkit-calc(13.33333333vw); calc(13.33333333vw); }
100vw相当于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！那么1vw就是表示1%的屏幕宽度。
其中的13.33333333vw是怎么来的呢？就是你的设计稿是750px，那么设计稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是html的font-size设置为100px相当于1rem（设计稿为750px）。那么我们就可以很轻松的换算设计稿中的单位为rem了，比如一个元素宽度为150px，转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。
参考网易新闻移动端的写法：
/** * 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 { calc(13.33333333vw); } @media screen and (max-width: 320px) { html { font-size: 42.667px; font-size: calc(13.33333333vw); } } @media screen and (min-width: 321px) and (max-width: 360px) { 48px; } @media screen and (min-width: 361px) and (max-width: 375px) { 50px; } @media screen and (min-width: 376px) and (max-width: 393px) { 52.4px; } @media screen and (min-width: 394px) and (max-width: 412px) { 54.93px; } @media screen and (min-width: 413px) and (max-width: 414px) { 55.2px; } @media screen and (min-width: 415px) and (max-width: 480px) { 64px; } @media screen and (min-width: 481px) and (max-width: 540px) { 72px; } @media screen and (min-width: 541px) and (max-width: 640px) { 85.33px; } @media screen and (min-width: 641px) and (max-width: 720px) { 96px; } @media screen and (min-width: 721px) and (max-width: 768px) { 102.4px; } @media screen and (min-width: 769px) { } body { font-family: "PingFangSC-Regular","Microsoft YaHei",Helvetica; color: #333333; background: #f5f7f9; } html a { #333333; }
这样写法也是为了兼容老版本手机不支持vw以及calc语法。
如果页面使用px单位，怎样进行rem的适配，把px转换为rem单位：
- postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
- lib-flexible 用于设置 rem 基准值
参考地址：