ZZDianXin_UI/WebChart/css/recet.css

/**
 * 大屏字体适应
 */
 //设计屏幕大小
 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.body.clientHeight/ designHeight;
 }
 var getWidthScale = function(){
     return document.body.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();
 }
 //所有自适应相关的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;
    }