rem布局，在用户调整手机字体大小/用户调整浏览器字体大小后，布局错乱问题

最新推荐文章于 2022-06-17 17:35:21 发布

孜梓不倦

最新推荐文章于 2022-06-17 17:35:21 发布

阅读量4k

点赞数

转：https://www.cnblogs.com/gaidalou/p/7685018.html

一、用户调整浏览器字体大小，影响的是从浏览器打开的web页。

　　浏览器设置字体大小，影响浏览器打开的页面。通过js可控制用户修改字体大小，使页面不受影响。

 
         ( 
         function 
         (doc, win) { 
        
         //      用原生方法获取用户设置的浏览器的字体大小(兼容ie) 
        
         if 
         (doc.documentElement.currentStyle) { 
        
         var  
         user_webset_font=doc.documentElement.currentStyle[ 
         'fontSize' 
         ]; 
        
         } 
        
         else  
         { 
        
         var  
         user_webset_font=getComputedStyle(doc.documentElement, 
         false 
         )[ 
         'fontSize' 
         ]; 
        
         } 
        
         //      取整后与默认16px的比例系数 
        
         var  
         xs=parseFloat(user_webset_font)/16; 
        
         //      设置rem的js设置的字体大小 
        
         var  
         view_jsset_font,result_font; 
        
         var  
         docEl = doc.documentElement, 
        
         resizeEvt =  
         'orientationchange'  
         in  
         window ?  
         'orientationchange'  
         :  
         'resize' 
         , 
        
         clientWidth, 
        
         recalc =  
         function 
         () { 
        
         clientWidth = docEl.clientWidth; 
        
         if 
         (!clientWidth)  
         return 
         ; 
        
         if 
         (!doc.addEventListener)  
         return 
         ; 
        
         if 
         (clientWidth<750){ 
        
         //              设置rem的js设置的字体大小 
        
         view_jsset_font=100 * (clientWidth / 750); 
        
         //              最终的字体大小为rem字体/系数 
        
         result_font=view_jsset_font/xs; 
        
         //              设置根字体大小 
        
         docEl.style.fontSize = result_font +  
         'px' 
         ; 
        
         } 
        
         else 
         { 
        
         docEl.style.fontSize = 100 +  
         'px' 
         ; 
        
         } 
        
         }; 
        
         win.addEventListener(resizeEvt, recalc,  
         false 
         ); 
        
         doc.addEventListener( 
         'DOMContentLoaded' 
         , recalc,  
         false 
         ); 
        
         })(document, window);