vue2.0 flexible.js + rem 进行自适应开发

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

<style lang="scss">
  @import './base/css/normalize.scss';

</style>

 

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

.