检测屏幕大小并更改 div 填充中的百分比

Question

我目前正在调整我的 div 顶部和底部填充的百分比（菜单和关于），以便它们每个填充一个页面。它在我的屏幕尺寸上看起来很棒，但是当它进入不同的屏幕时，内容不适合页面。有什么方法可以检测屏幕大小并更改百分比吗？

HTML：

<div id="menu">
                    <p class="menu_info">
                        The food at Cure is inspired by the season’s best produce, gathered by a variety of local and global artisans. These seasonal flavors are crisply paired with a sharp drinks list which includes a reserve wine list of hard to source vintage wines for connoisseurs.
                    </p>

                    <div id="month_menu">

                        <p id="month">OUR JULY MENU</p>

                        <div>
                            <p id="lunch">LUNCH</p>
                            <div class="courses">
                                <p><a href="menu/cure_menu_july_lunch.pdf" target="_blank">2 course/3 course</a></p>
                            </div>
                        </div>

                        <div>
                            <p  id="dinner">DINNER</p>
                            <div class="courses">
                                <p>mon-thurs:</p>
                                <p><a href="menu/cure_menu_july_4course.pdf" target="_blank">4 course</a></p>
                            </div>
                            <div class="courses">
                                <p>fri & sat:</p>
                                <p><a href="menu/cure_menu_july_5course.pdf" target="_blank">5 course</a></p>
                            </div>
                        </div>

                    </div> 


        <div id="about">
            <p class="about_header">OUR RESTAURANT</p>
            <p class="about_info">Cure, which in Latin (curare) stands for hospitality or “to take care of”, is headed by Chef-Owner Walsh, who has conceptualized a creative space where a seamless experience of top-notch food, drink and service is delivered in a casual yet refined environment.  Cure seats 40, including a chef’s table of eight, within the 1,350 sq ft shophouse space.</p>
             <p class="about_info" style="text-indent:25px;">It integrates his influences and inspirations from his many years of cooking in acclaimed Michelin star kitchens across Dublin, London and New York, and his firm belief in going back to the basics of hospitality: striving to take care of guests in the best way possible by offering them the best food, drink and service experience in an accessible and personable way.</p>
        </div>

CSS：

#menu{
    padding-top:20%;
    padding-bottom:20%;
}

#about{
    padding-top:22%;
    padding-bottom:22%;
}

Answer 1

您应该使用 jquery 来根据屏幕大小处理更改。有两种有用的方法变得很方便。

$(window).height(); //returns the height of the window
$(window).width(); //returns the width of the window

您可以在页面加载时检查屏幕大小并动态更改 div 的填充（试错法效果最佳）。您还可以在窗口调整大小时更改填充（或其他）。这样即使用户调整窗口大小，您的页面也看起来不错。

$(window).resize(function() {
//this code will be executed when the window is re-sized
});

您可以使用 .css() 来更改给定 here 的元素的 css 属性。

Answer 2

您应该尝试使用 vh CSS 单元，它使用视口高度。

如果需要跨浏览器兼容性：

试试这个：

    (function( $, window ){

  var $win = $(window)
      , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/\d+/)[0] / 100,
      unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this,
        update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update );
    return update();
  };

}( jQuery, window ));

$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

工作演示：http://jsbin.com/izosuy/1/edit?js,output

在 IE8 中也能很好地工作！

阅读此主题以获取更多信息：Is there any cross-browser javascript for making vh and vw units work

Answer 3

javascript 可以做到。

使用 window.innerWidth 和 window.innerHeight 您可以检索窗口的大小（以像素为单位）您网站的可见区域。

然后你做你时髦的计算来确定你的填充。并提交：

document.getElementById('menu').setAttribute('style', 'padding-top:'+varTop+'%; padding-bottom:'+varBot+'%');    

请注意，您也可以使用“px”作为单位而不是“%”并设置 'padding-top:123px;'

放在一起可能看起来像这样：

<script>
setPadding();

function setPadding() {
    var varTop, varBot;
    varTop = window.innerHeight; //your calculations here
    varBot = window.innerHeight; //
    document.getElementById('menu').setAttribute('style', 'padding-top:'+varTop+'px; padding-bottom:'+varBot+'px;');
}
</script>

然后，您应该在调整窗口大小时调用函数 setPadding（请参阅其他答案）。