码迷,mamicode.com
首页 > 其他好文 > 详细

布局缩放

时间:2018-11-28 19:40:15      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:event   div   doc   resize   script   document   20px   javascrip   content   

js设置浏览器缩放比例

 function matchWidth() {
    let doc = document;
    var docEl = doc.documentElement,resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >=1920) {
             docEl.style.fontSize = ‘100px‘;
        } else {
             docEl.style.fontSize = 100 * (clientWidth / 1920) + ‘px‘;
        }
    };
    if (!doc.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
 }
matchWidth()

 css设置缩放比例

@media screen and (min-width:1920px) {
    html{
        font-size: 100px;
    }
}
@media screen and (max-width:1920px) {
    html{
        font-size: 100px;
    }
}
@media screen and (max-width:1680px) {
    html{
        font-size:  87.5px;
    }
}
@media screen and (max-width:1440px) {
    html{
        font-size: 75px;
    }
}
@media screen and (max-width:1366px) {
    html{
        font-size: 71.1px;
    }
}
@media screen and (max-width:1280px) {
    html{
        font-size: 66.7px;
    }
}
@media screen and (max-width:1024px) {
    html{
        font-size: 53.3px;
    }
}

 注意,css设置的样式需要rem布局

布局缩放

标签:event   div   doc   resize   script   document   20px   javascrip   content   

原文地址:https://www.cnblogs.com/good-qinqin/p/10034061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!