用JS更好的實現響應式布局

響應式布局更加高效的方法:

代碼實現

<script>
     $(function() {
         (function(){
        var $html = $('html');
        var $window = $('window');
        var $body = $('body');
        var psdsize =960;//這里表示我設計圖的寬度
        var htmlfont = $body.width()/psdsize*100 + 'px';//計算字體大小
        $html.css('font-size', htmlfont);//設置字體大小
        $body.css('opacity', 1);//針對一些手機瀏覽器的默認樣式
        //屏幕尺寸修改時，改變其大小
        $(window).resize(function(event) {
        htmlfont = $body.width()/psdsize*100+'px';
        $html.css('font-size', 'htmlfont');
          });
      })();
   });
</script>

 

 

插件的封裝

<script>
    $.extend({
           F_SIZE:function(size){//使用傳參的方式，以便靈活調用
           var $html = $('html');
           var $window = $('window');
           var $body = $('body');
           var psdsize = size;//這里表示我設計圖的寬度
           var htmlfont = $body.width()/psdsize*100 + 'px';//計算字體大小
           $html.css('font-size', htmlfont);//設置字體大小
           $body.css('opacity', 1);//針對一些手機瀏覽器的默認樣式
           //屏幕尺寸修改時，改變其大小
           $(window).resize(function(event) {
           htmlfont = $body.width()/psdsize*100 + 'px';
           $html.css('font-size', htmlfont);
          });
        }
   });
</script>