我目前正在调整我的 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/