Question

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

粘性标题：

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的top-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风格与手机不同。

这些是默认的Bootstrap媒体查询断点：

/* 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定义为50px填充，将小型设备定义为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内部定义相同样式的填充块，浏览器将全局属性与当前屏幕大小的@media特定属性相结合，以对内容进行样式化。

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

1 个答案: