XinXiangXLX_UI/WebChartNew/js/resolution1.js

 //设计屏幕大小
 var designHeight = 1100;
 var designWidth = 1920;
 /**
  * 插入样式
  * @param {样式} styleStr 
  */
 var initStyle = function(styleStr){
     let uid = 'fontStyle';
     let style = document.getElementById(uid) || document.createElement('style');
     style.id = uid;
     if(style.innerText && style.innerText === styleStr){
         return ;//前后相同，不更新
     }
     style.innerText = styleStr;
     if(!document.getElementById(uid)){
         let head = document.getElementsByTagName('head')[0];
         if(head){
             head.appendChild(style);
         }
     }
 }
 //获得整体比值变化
 var getHeightScale = function(){
     return document.documentElement.clientHeight/ designHeight;
 }
alert(document.documentElement.clientHeight)
 var getWidthScale = function(){
     return document.documentElement.clientWidth / designWidth;
 }
 var getScale = function(){
     return getHeightScale()>=getWidthScale()?getWidthScale():getHeightScale();
 }
 //获得真实字体大小
 var getRealFontSize = function(num){
     return num*getScale();
 }
 //横向
 var getWidthValue = function(num){
     return num*getWidthScale();
 }
 //纵向
 var getHeightValue = function(num){
     return num*getHeightScale();
 }
alert(getHeightValue);
 //所有自适应相关的css都写在下面
var getCss = function(){
    return 
//    .main{
//        padding-bottom:${getHeightValue(30)}px;
//    }
//    .titleCom{
//        font-size:${getRealFontSize(30)}px;
//    }
//    .tabsCom{
//        font-size:${getRealFontSize(18)}px;
//        line-height:${getHeightValue(20)}px;
//    }
//    .tabCom{
//        padding:${getHeightValue(2)}px 0px;
//    }
//    .header_back{
//        height:${getHeightValue(20)}px;
//        padding-left:${getWidthValue(5)}px;
//        line-height:${getHeightValue(18)}px;
//    }
//    .header{
//        height:${getHeightValue(20)}px;
//    }
//    .content_one_item{
//        height:${getHeightValue(170)}px;
//    }
//    .textItem{
//        font-size:${getRealFontSize(22)}px;
//        line-height:${getHeightValue(50)}px;
//        padding-left:${getWidthValue(40)}px;
//    }
//    .textItem img{
//        height:${getHeightValue(20)}px;
//        margin-right:${getWidthValue(5)}px;
//    }
}