1.在页面中引入flexible.js

base.js

/** * 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) {    console.warn('将根据已有的meta标签来设置缩放比例');    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) {      docEl.setAttribute('data-os', 'ios');      // 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 = 14 * dpr + 'px';  } else {    doc.addEventListener('DOMContentLoaded', function(e) {      doc.body.style.fontSize = 14 * 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'] = {}));

util.js 工具类

/** * 获取当前元素所有最终使用的CSS属性值 */export function getStyle(el,style){  return parseInt(window.getComputedStyle(el, false)[style])}/** * 获取 设备像素比 */export function getDeviceRatio(){	var isAndroid = window.navigator.appVersion.match(/android/gi);  var isIPhone = window.navigator.appVersion.match(/iphone/gi);  var devicePixelRatio = window.devicePixelRatio;  var dpr;  if (isIPhone) {    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案    if (devicePixelRatio >= 3) {      dpr = 3;    } else if (devicePixelRatio >= 2){      dpr = 2;    } else {      dpr = 1;    }  } else {    // 其他设备下，仍旧使用1倍的方案    dpr = 1;  }  return dpr}

　　

2.安装 node-sass

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

安装 sass-loader

npm install sass-loader --save

 

3.重置全局样式

_normalize.scss

@charset "utf-8";html{  color: #000;  background: #fff;  overflow-y: scroll;  -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%; }html * {  outline: none;  -webkit-text-size-adjust: none;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}html,body {  font-family: sans-serif;  height: 100%;  width:100%;  // overflow:hidden;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {  margin: 0;  padding: 0;}input,select,textarea {  font-size: 100%;}table {  border-collapse: collapse;  border-spacing: 0;}fieldset,img {  border: 0;}abbr,acronym {  border: 0;  font-variant: normal;}del {  text-decoration: line-through;}address,caption,cite,code,dfn,em,th,i,var {  font-style: normal;  font-weight: 500;}ol,ul {  list-style: none;}caption,th {  text-align: left;}h1,h2,h3,h4,h5,h6 {  font-size: 100%;  font-weight: 500;}q:before,q:after {  content: '';}sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sup {  top: -0.5em;}sub {  bottom: -0.25em;}a:hover {  text-decoration: underline;}ins,a,a:active,a:visited,a:link{  text-decoration: none;}.clearfix{  &:after{    display: table;    clear: both;    content: "";    visibility: hidden;;    height: 0;  }}body{  height:100%;  font-family: "Microsoft YaHei";}

 等同于 reset.css

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header,menu, nav, output, ruby, section, summary,time, mark, audio, video, input {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font-weight: normal;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, menu, nav, section {  display: block;}body {  line-height: 1;}blockquote, q {  quotes: none;}blockquote:before, blockquote:after,q:before, q:after {  content: none;}table {  border-collapse: collapse;  border-spacing: 0;}/* custom */a {  color: #7e8c8d;  text-decoration: none;  -webkit-backface-visibility: hidden;}li {  list-style: none;}::-webkit-scrollbar {  width: 5px;  height: 5px;}::-webkit-scrollbar-track-piece {  background-color: rgba(0, 0, 0, 0.2);  -webkit-border-radius: 6px;}::-webkit-scrollbar-thumb:vertical {  height: 5px;  background-color: rgba(125, 125, 125, 0.7);  -webkit-border-radius: 6px;}::-webkit-scrollbar-thumb:horizontal {  width: 5px;  background-color: rgba(125, 125, 125, 0.7);  -webkit-border-radius: 6px;}html, body {  width: 100%;}body {  -webkit-text-size-adjust: none;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

　　

4.常用 mixin 函数

_mixins.scss

/** * 字体 */@mixin font-dpr($font-size){  font-size: $font-size;  [data-dpr='2'] & {    font-size: $font-size * 2;  }  [data-dpr='3'] & {    font-size: $font-size * 3;  }  //下版注意加上line-hegiht:100%}/** * 行高 */@mixin lin-dpr ($height) {  line-height: $height;  [data-dpr='2'] & {    line-height: $height * 2;  }  [data-dpr='3'] & {    line-height: $height * 3;  }}/** * 高度 */@mixin height-dpr($height) {  height: $height;  [data-dpr='2'] & {    height: $height * 2;  }  [data-dpr='3'] & {    height: $height * 3;  }}/** * 背景图 */@mixin img-dpr($url,$name,$type:".png"){  background-image: url($url+"2x/"+ $name+"@2x"+$type);  [data-dpr="3"] &{    background-image: url($url+"3x/"+ $name+"@3x"+$type);  }}/** * 设置宽、高 */@mixin setSize($width,$height){  width:$width;  height:$height;}/** * 禁止改变元素的浏览器默认风格 */@mixin hideAppearance{  -webkit-appearance: none;  -moz-appearance: none;  appearance:none;}/** * 解决1px问题 */@mixin border-1px($color) {  position: relative;  &:after {    display: block;    position: absolute;    left: 0;    bottom: 0;    width: 100%;    border-top: 1px solid $color;    content: ' ';  }}/** * 判断在不同 dpr 下的显示情况 */@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {  .border-1px {    &::after {      -webkit-transform: scaleY(0.7);      transform: scaleY(0.7);    }  }}@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {  .border-1px {    &::after {      -webkit-transform: scaleY(0.5);      transform: scaleY(0.5);    }  }}

　　

5.px 转 rem 函数

_functions.scss

//将px转换成rem$defaut-font-size: 64px; // 设计图为 640@function px2rem($px) {  @return $px/$defaut-font-size * 1rem;}

 

6.引用

为了方便依赖所有的公共样式，创建一个 app.scss ，引入其他的公共scss,当应用到其他 css 时，直接引入app即可（@import "./app"）

app.scss  

// 为了方便依赖所有的公共样式，创建一个 app.scss@import "./functions";@import "./mixins";

App.vue 中 引入 重置 css样式的 _normalize.scss

 

7.常用语法

（1）导入

@import  引入 .scss 文件

例如：

@import '../base/css/base.scss';

（2）变量

普通变量

$fontSize: 12px;body{  font-size:$fontSize;}

默认变量

sass的默认变量仅需要在值后面加上!default即可。

$baseLineHeight:1.5 !default;body{  line-height: $baseLineHeight; }

（3）mixin 混合

@include  引入 mixin

例如：

/** * 字体 */@mixin font-dpr($font-size){  font-size: $font-size;  [data-dpr='2'] & {    font-size: $font-size * 2;  }  [data-dpr='3'] & {    font-size: $font-size * 3;  }}

应用

@include font-dpr(20px); // font-size:20px;

（4）function 函数

例如：

//将px转换成rem$defaut-font-size: 64px; // 设计图为 640@function px2rem($px) {  @return $px/$defaut-font-size * 1rem;}

引用

margin-top: px2rem(20px);

（5）继承

h1{  border: 4px solid #ff9aa9;}.speaker{  @extend h1;  border-width: 2px;}

（6）判断  @if

sass

$lte7: true;$type: monster;.ib{    display:inline-block;    @if $lte7 {        *display:inline;        *zoom:1;    }}p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}

css

.ib{    display:inline-block;    *display:inline;    *zoom:1;}p {  color: green; }

参考：https://www.w3cplus.com/sassguide/syntax.html

.