zoukankan      html  css  js  c++  java
  • app中rem算法

    第一次用vue做APP被rem坑惨了

    下面贴出 rem 的算法及使用方法

    在自定义js中定义函数

    export default {
    install: function(Vue, options) {
    Vue.fontSize = function(){
    (function(doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    }(document, window));
    }
    }
    }

    在main.js中引入并加载

    import fontSize from './lib/fontSize.js'
    Vue.use(fontSize)
    Vue.fontSize();
    

    检查原素你就可以看到效果了

    在less公共文件中定义函数

    .pxToRem(@name,@px) {
        @{name}: (@px / 100) * 1rem;
    }
    

    应用的时候先引入定义公共函数的less

    然后直接在选择器下使用就可以了

    .pxToRem(font-size, 32);

  • 相关阅读:
    C++ CheckListBox
    TreeView查获节点并选中节点
    创建文件自动重命名
    bat
    Edit显示行号
    FindStringExact
    Extended ComboBox添加图标
    C++ Combobox输入时自动完成
    C++ ComboBox基础
    C++ Code_combobox
  • 原文地址:https://www.cnblogs.com/jsusu/p/7227407.html
Copyright © 2011-2022 走看看