zoukankan      html  css  js  c++  java
  • 用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>
  • 相关阅读:
    noi 1944 吃糖果
    noi 6049 买书
    noi 2985 数字组合
    noi 2728 摘花生
    noi 2718 移动路线
    noi 4977 怪盗基德的滑翔翼
    noi 8780 拦截导弹
    noi 1996 登山
    NOI 动态规划题集
    图的色数
  • 原文地址:https://www.cnblogs.com/yjq1021/p/7910953.html
Copyright © 2011-2022 走看看