頁面容器填充等於精確高度頁眉

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特定屬性組合爲當前屏幕大小以設置內容的樣式。