js按照宽高比例设定html字体 css排版的时候用rem单位设置字体-智软设计工作室

智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司，宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务，优惠的价格，深的客户信赖。相信有你的加入我们的明天会更有动力！期待与你合作！

2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案

你当前的位置：首页>>营销与网络

js按照宽高比例设定html字体 css排版的时候用rem单位设置字体

2024-03-10 20:49:00

css排版的时候用rem单位设置字体，以及间距什么的都可以用。

font-size: 0.42rem;更好更方便的适配字体大小。

padding: 0 0.23rem;

margin-bottom: 0.46rem;

宽度。用%

width: 50%;

高度用vh

/*
 # 按照宽高比例设定html字体, width=device-width initial-scale=1版
 # @pargam win 窗口window对象
 # @pargam option{
 designWidth: 设计稿宽度，必须
 designHeight: 设计稿高度，不传的话则比例按照宽度来计算，可选
 designFontSize: 设计稿宽高下用于计算的字体大小，默认20，可选
 callback: 字体计算之后的回调函数，可选
 }
 # ps:请尽量第一时间运行此js计算字体
 */
!function(win, option) {
    var count = 0,
        designWidth = option.designWidth,
        designHeight = option.designHeight || 0,
        designFontSize = option.designFontSize || 100,
        callback = option.callback || null,
        root = document.documentElement,
        body = document.body,
        rootWidth, newSize, t, self;
    //返回root元素字体计算结果
    function _getNewFontSize() {
        var iw=win.innerWidth>750?750:win.innerWidth;
        var scale = designHeight !== 0 ? Math.min(iw / designWidth, win.innerHeight / designHeight) : iw / designWidth;
        return parseInt( scale * 10000 * designFontSize ) / 10000;
    }
    !function () {
        rootWidth = root.getBoundingClientRect().width;
        self = self ? self : arguments.callee;
        //如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试20次，否则使用win.innerWidth计算
        if( rootWidth !== win.innerWidth &&  count < 20 ) {
            win.setTimeout(function () {
                count++;
                self();
            }, 0);
        } else {
            newSize = _getNewFontSize();
            //如果css已经兼容当前分辨率就不管了
            if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {
                root.style.fontSize = newSize + "px";
                return callback && callback(newSize);
            };
        };
    }();
    //横竖屏切换的时候改变fontSize，根据需要选择使用
    win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        clearTimeout(t);
        t = setTimeout(function () {
            self();
        }, 200);
    }, false);
}(window, {
    designWidth:750
});