移动端布局自适应

最新推荐文章于 2023-04-14 15:04:05 发布

summer_lllx

最新推荐文章于 2023-04-14 15:04:05 发布

阅读量136

点赞数

分类专栏：前端 vue 文章标签： vue 自适应

本文链接：https://blog.csdn.net/weixin_44230807/article/details/103420245

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

基于vue的移动端自适应

移动端布局自适应：link

移动端自适应

var fontSize=100;   //设置网页字体100px
var designwidth=750;	//设计稿大小750px（根据设计稿更改）
function fontsize(){
	var dpr=window.devicePixelRatio ||1;
    var screenwidth=document.documentElement.clientWidth;
    if(screenwidth==0){
    	screenwidth=window.screen.availWidth;//设备可用区域宽度，隐藏窗口也能获取
    }
    var realwidth=(screenwidth/designwidth)*fontSize;
    if(realwidth > 70 ) {realwidth = 70}
    document.getElementsByTagName("html")[0].style.fontSize=realwidth+"px";
    document.getElementsByTagName("html")[0].setAttribute("data-dpr-"+dpr,"");
    
}
fontsize();

var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
if (document.addEventListener){
    window.addEventListener(resizeEvt, fontsize, false);
    document.addEventListener('DOMContentLoaded', fontsize, false);
}

//NOdelist不能使用foreach的问题解决 
if (window.NodeList && !NodeList.prototype.forEach) { 
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}