页面容器填充等于精确高度页眉

Question

我有一个shopify商店的简单问题，我已经安装了一个固定页眉，并向pagecontainer中添加了顶部填充50px，这样头部将不会与主要内容重叠，现在移动设备上有50像素的空间，太空了。如果你能帮助我为桌面和手机设置两个顶级填充，我将非常感激。

置顶头：

header.site-header { 
    position: fixed; 
    z-index: 99999; 
    background-color: #fff; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36); 
    -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36); 
    box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36); 
} 

页容器（主要内容）：

#PageContainer { 
    overflow: hidden; 
    padding-top: 50px; 
    height: 100%; 

如何设置pagecontainer的顶pading相等的确切高度的不管屏幕的分辨率是什么？或者有一种方法可以为每个分辨率设置不同的填充（可能是通过媒体查询？）我刚刚开始学习这个东西3天前，但我做了很多谷歌搜索，可以学得非常快..我也找到了解决方案这个问题，但我不如何实现它：移动头自己固定的包装：

<div class="header.site-header"> 
    <div class="PageContainer is-moved-by-drawer"> 
     This is the fixed header content. 
    </div> 
</div> 

<div class="PageContainer is-moved-by-drawer"> 
    This is the page content. 
</div> 

太谢谢你了！

编辑：这不是我的html代码！

Answer 1

您想要做的就是使用CSS Media查询，这将允许您为不同设备大小定义不同的样式，因此您可以定义桌面/笔记本电脑/平板电脑尺寸的#PageContainer样式，并且可以定义手机的#PageContainer风格不同。

这些都是缺省引导媒体查询断点：

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 

因此，对于你的应用程序，你需要做的是定义为#PageContainer大型设备为50像素填充，并在可能的填充20px的小型设备，在中型屏幕上甚至可能达到40px。因此，像这样在你的CSS

#PageContainer { 
    overflow: hidden; 
    height: 100%; 
} 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 
    #PageContainer { 
     padding-top: 20px; 
    } 
} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    #PageContainer { 
     padding-top: 20px; 
    } 
} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 
    #PageContainer { 
     padding-top: 30px; 
    } 
} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 
    #PageContainer { 
     padding-top: 50px; 
    } 
} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 
    #PageContainer { 
     padding-top: 50px; 
    } 
} 

你真的只需要最小和最大@media块，但我已经包括了所有的人，所以你可以看到不同的断点和实验。

您可以定义核心样式，无论首先在@media块之外放置什么样的屏幕大小，这些属性都是相同的，这样您就不会不必要地重复自己，然后在@中的相同样式中定义填充。媒体块，并且浏览器将全局属性与@media特定属性组合为当前屏幕大小以设置内容的样式。