三种（rem）移动端适配方案

1. 媒体查询。

2. js 动态设置 html 的 font-size（rem 为单位）。

3. 淘宝提供的解决方案 flexible.js（rem 为单位）。

媒体查询

优点：

1. 方法简单，成本低，移动和 PC 维护同一套代码。

2. 只用修改 css 文件。

缺点：

1. 代码量大，维护不方便。

2. 为兼顾大屏或高清设备，会造成其他资源浪费，特别是加载图片资源。

3. 为了兼顾移动端和 PC 端各自响应式的展示效果，难免会损失各自特有的交互方式。

js 动态设置 html 的 font-size

1. 设置 meta viewport 属性

2. 添加动态设置 html 的 font-size 的 js

   (function(doc, win) {
       var docEl = doc.documentElement,
           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
           recalc = function() {
               var clientWidth = docEl.clientWidth;
               if (!clientWidth) return;
           // 设置设计稿的宽度clientWidth为750
               if (clientWidth >= 750) {
                   docEl.style.fontSize = '75px';
               } else {
                   // 设置设计稿的宽度clientWidth为750
                   docEl.style.fontSize = 75 * (clientWidth / 750) + 'px';
               };
           };
       if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);
   

淘宝提供的解决方案 flexible.js

这个解决方案只解决苹果设备上的 dpr 为2和3的情况，不考虑安卓设备也不考虑 pad。

1. 设置 meta 标签。

2. 引入 flexible.js 文件。

3. 把设计稿中的px转化为rem

   但在实际开发中, 借助一个工具cssrem. 通过vscode开发工具下载cssrem插件,然后在设置里面找到cssrem.rootFontSize, 把数值设为75(一般情况下移动端设计稿默认是750, 1rem就是75px, 可根据设计稿尺寸自行调整)

   QQ截图20190412174517.png

4. 案列代码如下：

   
   
       
           
           
           
           
           
           
           
       
       
           
   
               
   
                   
   
               
               
   
                   
   
                       
   
                           
   Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093
                           
   双11价¥299.06(满400减100)
                           
   1小时内热卖5885件
                           {activeName}