基于视口的动态剖面高度

Question

我开发了一个带有锚点平滑滚动导航的全屏背景垂直主题。 我正在尝试在视口高度上调整背景部分，因为在高分辨率下，即使他们在特定锚点上导航，某些用户也可以看到下一个和上一个部分。

例如：用户正在浏览 www.mysite.com/#aboutus，但在高分辨率下您可以看到上一个 (#home) 和下一个 (#portfolio) 部分的内容和背景。

所以我遇到了三个问题：

1. 考虑到有一个页眉和一个固定位置和高度的页脚，所有背景都必须适应视口
2. 该部分必须在调整大小和加载时适应视口高度
3. 主体必须滚动到适应视口初始大小或调整大小的特定锚点

对于第一个问题，我使用这个脚本来动态设置高度

$(function(){
    $(window).load(function(){ // On load
        $(window).load(function(){ // On load
            $('#section_name').css({'height':(($(window).height()))+'px'});
            $('#section_name').css({'margin-bottom':'200px'});


        });

我尝试动态添加边距底部来下推下一节内容。 目的是使背景和部分内容适应视口高度，以避免以高分辨率看到上一个和下一个部分。

谁能帮帮我？

Answer 1

这可以通过css中的媒体查询来实现。您可以为每个设备编写单独的css。 例如：-

@media screen and ( max-height: 600px ){
    body {
           height:600px;
    }
}