rem是什么?以及对rem进行封装

rem是什么?

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

创建utils包，将rem.js放入utils包下

/**
 * 移动端 rem 布局方案，需配合 sass.scss 方法 px2rem 使用
 * @module knife/utils/rem
 * @author bigfact
 */

/**
 * 布局缩放基数，与 ./sass.scss 文件中 $htmlFontSize 的值一致
 */
const layoutRate = 100

/**
 * 根元素 html font-size 设置方法
 * @param {Number} baseWidth 参照屏幕宽度
 * @param {Number} maxWidth 最大屏幕宽度
 * @param {Number} rate 布局缩放基数
 * @param {Number} maxRate 最大缩放基数
 * @example
 * // sass
 * 占位 @import 'node_modules/knife/utils/rem/sass.scss';
 * body { font-size: px2rem(14); }
 * // css
 * body { font-size: 0.14rem; }
 * // js
 */
export default function(baseWidth = 320, maxWidth = 768, rate = layoutRate, maxRate = layoutRate) {
  function setHtmlFontSize() {
    let screenWidth = window.innerWidth
    let fontSize = screenWidth < maxWidth ? screenWidth / baseWidth * rate : maxWidth / baseWidth * rate
    // 限制最大为 iphone 6s 屏幕效果
    fontSize > maxRate && (fontSize = maxRate)
    document.documentElement.style.fontSize = fontSize + 'px'
    document.documentElement.style.height = '100%'
  }
  setHtmlFontSize()
  window.onload = setHtmlFontSize
  window.onresize = setHtmlFontSize
}

将ajax.js 文件引入main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import px2rem from './utils/rem'

px2rem()

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在styles包下创建rem.scss文件

rem.scss(自适应布局)

/**
 * 移动端 rem 布局方案 sass 方法，需配合 index.js 使用
 * @module knife/utils/rem/sass_scss
 * @author bigfact
 * @example @import 'node_modules/knife/utils/rem/sass.scss';
 */

/**
 * 默认 html font-size 数值
 * @name $htmlFontSize
 * @example
 * // 在导入 sass 文件前，复写 $htmlFontSize 变量，可更新布局基数
 * // sass
 * $htmlFontSize: 1000;
 * 占位 @import 'node_modules/knife/utils/rem/sass.scss';
 * html { font-size: $htmlFontSize() * 1px; }
 * body { font-size: px2rem(14); }
 * // css
 * html { font-size: 1000px; }
 * body { font-size: 0.014rem; }
 */
 $htmlFontSize: 100 !default;

 /**
  * px 单位值转换到 rem 单位值
  * @function px2rem
  * @param {Number} $px px 单位值
  * @returns {String} $px px 单位值在当前布局方案下对应的 rem 单位值
  * @example
  * // 布局基数为默认 100
  * // sass
  * .fs16 { font-size: px2rem(16); }
  * // css
  * .fs16 { font-size: 0.16rem; }
  */
 @function px2rem($px) {
   @return $px / $htmlFontSize * 1rem;
 }
 

将rem.scss文件引入common.scss这个对外 公共样式文件中

@import '@/styles/rem.scss';
@import '@/styles/iconfont.scss';

/* 可选颜色 */
$grey-88: #888888;
$line: #e5e5e5;

/* 字体 */
.font-kaiti {
  font-family: Kaiti SC;
}

/* 单行省略： 需要加宽度width */
.single-dot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 断行 */
.line-break {
  word-break: normal;
  white-space: pre-line;
}
.line-two {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* div 滚动条隐藏 */
::-webkit-scrollbar {
  display: none;
}

/* div 滚动 */
.scoller-x {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  /* 兼容iOS滚动不流畅 */
  -webkit-overflow-scrolling: touch;
}

/* div 滚动 */
.scoller-y {
  overflow-y: auto;
  overflow-x: hidden;
  white-space: nowrap;
  /* 兼容iOS滚动不流畅 */
  -webkit-overflow-scrolling: touch;
}

// ---------- 按钮点击效果 -----------
.btn-active:active {
  background-color: #e2e2e2 !important;
}

使用

height：px2rem(200)；