pc端字体大小自适应几种方法

2018/11/16 10:39
阅读数 307
$(window).resize( function () // 绑定到窗口的这个事件中
{
  var whdef = 100/1920; // 表示1920的设计图,使用100PX的默认值
  var wH = window.innerHeight; // 当前窗口的高度
  var wW = window.innerWidth; // 当前窗口的宽度
  var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  $( 'html' ).css( 'font-size' , rem + "px" );
});
 
$( function (){
 
  var whdef = 50/750; // 表示750的设计图,使用50PX的默认值
  var wH = window.innerHeight; // 手机窗口的高度
  var wW = window.innerWidth; // 手机窗口的宽度
  var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  $( 'html' ).css( 'font-size' , rem + "px" );
 
})
 
 //REM适配
      var _self =  this ;
        _self.width = 750;
        _self.fontSize = 100; 
        _self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
        _self.changePage =  function (){
        document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
        }
        _self.changePage();
        window.addEventListener('resize', function (){_self.changePage();}, false ); 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部