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

标签 jquery html css

我目前正在调整我的 div(MENU 和 ABOUT)的填充顶部和底部的百分比,以便它们各自填充一个页面。它在我的屏幕尺寸上看起来很棒,但是当它转到不同的屏幕时,内容不适合页面。有什么方法可以检测屏幕尺寸并更改百分比吗?

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%;
}

最佳答案

您应该使用 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() 来更改给定元素的 css 属性 here .

关于jquery - 检测屏幕大小并更改 div 填充中的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31288892/

相关文章:

切换类的 jquery(反向)速度(jsfiddle ex)

javascript - 使用 href ssh ://url with command line options 从 html 打开终端

css - Ruby/Rails - 在 css 中使用转义 uri

jquery - 使用 jQuery ajax 时如何向用户显示 JSON HTTP 422 响应?

jquery - jquery slideDown()后div不在一行中

java - 转义单引号在 HTML 页面中创建不需要的 "\"

html - 如何将最小高度设置为屏幕的 100% 和页面的一半?

具有圆形或弧段的 CSS 剪辑/路径/蒙版/形状动画

javascript - 如何用 IE 修复菜单栏 css-adapter 问题

jquery - 重定向后在目标页面上显示通知