美文网首页
rem是什么?以及对rem进行封装

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

作者: xiesen | 来源:发表于2019-07-12 17:22 被阅读0次

    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);
    

    相关文章

      网友评论

          本文标题:rem是什么?以及对rem进行封装

          本文链接:https://www.haomeiwen.com/subject/iyuykctx.html