玖叶教程网

移动端坑的地方在哪里呢？

一是要适配各种机型，ios还好一点，但是安卓就坑了，各式各样的尺寸，加上高清屏，适配一直是一件很头疼的问题。但是，问题总能找出一些解决方案，媒体查询，rem布局，vw/vh布局等等。单纯的媒体查询太麻烦，而vw/vh布局呢，兼容性不是很好，低版本的手机不支持。所以，这次的项目，适配的重担就交给了rem布局。而rem布局，又大致分为了两个版本，一个是网易版本的，一个是淘宝版本的。详情可以参考这篇文章 —— 传送门

二是则是浏览器的问题了，这个也是避免不了的。因为每个产商搞出来的东西肯定是不可能一样的，这样的话，特性的支持上肯定有所差异。所以，只能尽量去满足不同浏览器的差异了。

开发前的一些准备

• 因为这次是使用vue开发，所以要先使用官方给的命令行工具vue-cli构建好开发的脚手架，这里就不赘述了。然后就将适配的js文件放入项目中，在这里，我使用的是淘宝的适配方案，虽然说网易的更容易去计算，但我在这个项目中使用Sass/SCSS，所以不存在计算难的问题了。
• 1) 引入

// 在main.js中配置
// 需要根据flexible.js在实际项目的路径去配置(下面的是我项目的配置)
 
import './assets/scripts/flexible.js'

• 2) 代码如下

// 这个是flexible.js
 
(function (win, lib) {
 var doc = win.document;
 var docEl = doc.documentElement;
 var metaEl = doc.querySelector('meta[name="viewport"]');
 var flexibleEl = doc.querySelector('meta[name="flexible"]');
 var dpr = 0;
 var scale = 0;
 var tid;
 var flexible = lib.flexible || (lib.flexible = {});
 
 if (metaEl) {
 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
 if (match) {
 scale = parseFloat(match[1]);
 dpr = parseInt(1 / scale);
 }
 } else if (flexibleEl) {
 var content = flexibleEl.getAttribute('content');
 if (content) {
 var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
 var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
 if (initialDpr) {
 dpr = parseFloat(initialDpr[1]);
 scale = parseFloat((1 / dpr).toFixed(2));
 }
 if (maximumDpr) {
 dpr = parseFloat(maximumDpr[1]);
 scale = parseFloat((1 / dpr).toFixed(2));
 }
 }
 }
 
 if (!dpr && !scale) {
 var isAndroid = win.navigator.appVersion.match(/android/gi);
 var isIPhone = win.navigator.appVersion.match(/iphone/gi);
 var devicePixelRatio = win.devicePixelRatio;
 if (isIPhone) {
 // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
 dpr = 3;
 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
 dpr = 2;
 } else {
 dpr = 1;
 }
 } else {
 // 其他设备下，仍旧使用1倍的方案
 dpr = 1;
 }
 scale = 1 / dpr;
 }
 
 docEl.setAttribute('data-dpr', dpr);
 if (!metaEl) {
 metaEl = doc.createElement('meta');
 metaEl.setAttribute('name', 'viewport');
 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 if (docEl.firstElementChild) {
 docEl.firstElementChild.appendChild(metaEl);
 } else {
 var wrap = doc.createElement('div');
 wrap.appendChild(metaEl);
 doc.write(wrap.innerHTML);
 }
 }
 
 function refreshRem() {
 var width = docEl.getBoundingClientRect().width;
 // 适配平板
 if (width / dpr > 540) {
 width = 540 * dpr;
 }
 var rem = width / 10;
 docEl.style.fontSize = rem + 'px';
 flexible.rem = win.rem = rem;
 }
 
 win.addEventListener('resize', function () {
 clearTimeout(tid);
 tid = setTimeout(refreshRem, 300);
 }, false);
 win.addEventListener('pageshow', function (e) {
 if (e.persisted) {
 clearTimeout(tid);
 tid = setTimeout(refreshRem, 300);
 }
 }, false);
 
 if (doc.readyState === 'complete') {
 doc.body.style.fontSize = 12 * dpr + 'px';
 } else {
 doc.addEventListener('DOMContentLoaded', function (e) {
 doc.body.style.fontSize = 12 * dpr + 'px';
 }, false);
 }
 
 
 refreshRem();
 
 flexible.dpr = win.dpr = dpr;
 flexible.refreshRem = refreshRem;
 flexible.rem2px = function (d) {
 var val = parseFloat(d) * this.rem;
 if (typeof d === 'string' && d.match(/rem$/)) {
 val += 'px';
 }
 return val;
 }
 flexible.px2rem = function (d) {
 var val = parseFloat(d) / this.rem;
 if (typeof d === 'string' && d.match(/px$/)) {
 val += 'rem';
 }
 return val;
 }
 
})(window, window['lib'] || (window['lib'] = {}));

• 移动端还有一个问题，那就是click事件300毫秒延迟。解决方案也很简单
• 1) 安装

npm install fastclick --save

• 1
• 2) 引入项目
• 在main.js中配置

import fastClick from 'fastclick'
 
fastClick.attach(document.body)

• 使用SCSS的一点小技巧

在项目中，我们经常会使用到SCSS中的变量（可用于颜色，便于维护修改界面的整体颜色等等），Mixin， 还有就是函数，这些是比较常用的。这些东西一般在项目每个vue文件会使用到，比如说rem布局中使用的自定义函数 —— px2rem。然而每次使用前都要引用一次文件，那感觉很麻烦，所以就将全局中常用的SCSS代码放入到一个SCSS文件中，并注入到全局中。这样一来，就不用每次都引用这么麻烦了。

1) 首先你得安装Sass/SCSS的loader才可以在项目中使用SCSS

npm install sass-loader node-sass --save-dev

• 1

2) 然后得添加一个依赖

npm install sass-resources-loader --save-dev

• 1

3) 最后修改build/utils.js

scss: generateLoaders('sass').concat({
 loader: 'sass-resources-loader',
 options: {
 // 这里的'../src/assets/your.scss'
 // 换成实际项目中需要注入全局的文件路径
 resources: path.resolve(__dirname, '../src/assets/your.scss')
 }
})

这样三步完成后，就可以愉快的使用SCSS了。