前端页面尺寸适配(SCSS)

jQuery

minxin文件的使用 

在html对应的scss文件中的使用方法

PC端适配

@each $item in $screenList {

  @include responsive($item) {

    $scale: calculationScale($item);

    margin: $mt*$scale 0 0 $ml*$scale;

  }

}

移动端适配

@each $item in $mobileList {

  @include responsiveMobile($item) {

    $scale: calculationMobileScale($item);

    $mt: 44px;

    text-align: center;

    margin: $mt*$scale 0 0;

  }

}

mixin.scss文件

$optic: screen;

$is-hidpi: "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx)";

$screen-px: 1920px;

$screen-xxl: 1920px;

$screen-xl: 1600px;

$screen-lg: 1440px;

$screen-md: 1366px;

$screen-sm: 1280px;

$screen-xs: 1024px;

$screenList: $screen-xxl, $screen-xl, $screen-lg, $screen-md, $screen-sm, $screen-xs;

@function calculationScale($width) {

  @if $width == $screen-xxl {

    @return round(($screen-xxl/$screen-px)*10000)/10000

  } @else if $width == $screen-xl {

    @return round(($screen-xl/$screen-px)*10000)/10000

  } @else if $width == $screen-lg {

    @return round(($screen-lg/$screen-px)*10000)/10000

  } @else if $width == $screen-md {

    @return round(($screen-md/$screen-px)*10000)/10000

  } @else if $width == $screen-sm {

    @return round(($screen-sm/$screen-px)*10000)/10000

  } @else if $width == $screen-xs {

    @return round(($screen-xs/$screen-px)*10000)/10000

  }

}

@mixin responsive($width) {

  @if $width == $screen-xxl {

    @media #{$optic} and (max-width: $screen-xxl) {

      @content;

    }

  } @else if $width == $screen-xl {

    @media #{$optic} and (max-width: $screen-xl) {

      @content;

    }

  } @else if $width == $screen-lg {

    @media #{$optic} and (max-width: $screen-lg) {

      @content;

    }

  } @else if $width == $screen-md {

    @media #{$optic} and (max-width: $screen-md) {

      @content;

    }

  } @else if $width == $screen-sm {

    @media #{$optic} and (max-width: $screen-sm) {

      @content;

    }

  } @else if $width == $screen-xs {

    @media #{$optic} and (max-width: $screen-xs) {

      @content;

    }

  }

}

$mobile-px: 375px;

$mobile-xl: 420px;

$mobile-lg: 414px;

$mobile-md: 375px;

$mobile-sm: 320px;

$mobileList: $mobile-xl, $mobile-lg, $mobile-md, $mobile-sm;

@function calculationMobileScale($width) {

  @if $width == $mobile-xl {

    @return round(($mobile-xl/$mobile-px)*100)/100

  } @else if $width == $mobile-lg {

    @return round(($mobile-lg/$mobile-px)*100)/100

  } @else if $width == $mobile-md {

    @return round(($mobile-md/$mobile-px)*100)/100

  } @else if $width == $mobile-sm {

    @return round(($mobile-sm/$mobile-px)*100)/100

  }

}

@mixin responsiveMobile($width) {

  @if $width == $mobile-xl {

    @media #{$optic} and (max-width: $mobile-xl) {

      @content;

    }

  } @else if $width == $mobile-lg {

    @media #{$optic} and (max-width: $mobile-lg) {

      @content;

    }

  } @else if $width == $mobile-md {

    @media #{$optic} and (max-width: $mobile-md) {

      @content;

    }

  } @else if $width == $mobile-sm {

    @media #{$optic} and (max-width: $mobile-sm) {

      @content;

    }

  }

}

VUE

安装依赖

npm i lib-flexible -S

npm i px2rem-loader -D

安装完成以后在main.js引入lib-flexible

import 'lib-flexible'

在根目录src中新建postcss.config.js文件

module.exports = {

  plugins: {

    // 兼容浏览器，添加前缀

    autoprefixer: {

      overrideBrowserslist: [

        "> 1%",

        "last 2 versions",

        "not ie <= 8",

        "safari >= 7",

      ],

    },

    "postcss-pxtorem": {

      rootValue: 16,

      propList: ["*", "!border"], // 属性的选择器，*表示通用

      unitPrecision: 2, // 保留rem小数点多少位

      selectorBlackList: [".ig-"], // 忽略的选择器   .ig-  表示 .ig- 开头的都不会转换

      // selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。

    },

  },

};

在根目录src/utils中新建setRem.js等比适配文件 

可直接复制以下代码

// 结合 vue.config.js中的postcsstorem进行设置

function setRem() {

  var def = 32 / 750; // 表示750的设计图,使用100PX的默认值

  var bodyWidth = document.body.clientWidth; // 当前窗口的宽度

  var rem = bodyWidth * def; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

  setFontSize(rem);

}

//pc端

function setRemPC() {

  // var def = 16 / 1920; // 表示1920的设计图,使用100PX的默认值

  // var bodyWidth = document.body.clientWidth; // 当前窗口的宽度

  // var rem = bodyWidth * def; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

  var rem = 16; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

  setFontSize(rem);

}

function setFontSize(rem) {

  document.getElementsByTagName("html")[0].style.fontSize = rem + "px";

  document.getElementsByTagName("body")[0].style.fontSize = rem + "px";

  setTimeout(() => {

    document.getElementsByTagName("html")[0].style.fontSize = rem + "px";

    document.getElementsByTagName("body")[0].style.fontSize = rem + "px";

  }, 300);

}

export { setRem, setRemPC };

在app.vue中引入适配文件

  import { setRem, setRemPC } from '@/utils/setRem'

全局使用

created() {

    // 临时数据对接使用--后续需删除

    /* Vue.ls.set(

       ACCESS_TOKEN,

        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NTk2NjcyMzQsInVzZXJuYW1lIjoiYWRtaW4ifQ.6LhKOFOD0_HE1ksbXPP6dnseEUb23mI6Hvev4kP9lJU'

     )*/

    this.responseRem()

    window.addEventListener('resize', this.responseRem) //浏览器窗口大小改变时调用rem换算方法

  },

    methods: {

    // 改变窗口大小时重新设置 rem

    responseRem() {

      if (document.body.clientWidth < 600) {

        console.log('setRem mobile')

        setRem()

      } else {

        console.log('setRem PC')

        setRemPC()

      }

    },

  },