3

我刚刚从头开始构建我的 Shopify 主题。这是我的第一个响应式设计，我对一个主要问题的一切预期感到非常满意。

在我们的产品页面上，我们使用来自 Galleria.io 的全屏图片库作为背景来显示我们的产品图片。在桌面上，这是一个非常好的体验。

在移动设备上查看：http: //finegra.in/products/bowden

但是，在移动设备上，背景图像使页面具有固定约束，这意味着任何不在视口上的内容都无法向下滚动视图。

基本上，我试图弄清楚如何在保持全屏背景图像的同时打破固定约束。

实际上，我可以在移动设备上启动全屏图库而不是作为背景。

对此的任何帮助将不胜感激。

这是全屏背景库的 HTML：

<div id="galleria">
    <div class="galleria-container notouch fullscreen" style="width: 100%; height: 100%;">
        <div class="galleria-stage">
            <div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;"></div>
                </div>
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1663px; height: 960px; transition: none 0s ease 0s ; z-index: 1;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
                    <img width="1663" height="1108" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1663px; height: 1108px; position: absolute; top: -74px; left: 0px;" src="http://cdn.shopify.com/s/files/1/0207/2640/products/MG_9400_1024x1024.jpeg?156">
                </div>
            </div>
            <div class="galleria-loader" style="opacity: 1; display: none;"></div>
            <div class="galleria-counter" style="opacity: 1;">
                <span class="galleria-current">1</span>
                /
                <span class="galleria-total">10</span>
            </div>
            <div class="galleria-image-nav">
                <div class="galleria-image-nav-right" style="opacity: 0.5; display: block;"></div>
                <div class="galleria-image-nav-left" style="opacity: 0.5; display: block;"></div>
            </div>
        </div>
        <div class="galleria-thumbnails-container" style="top: 884px; opacity: 1;">
            <div class="galleria-thumb-nav-left disabled"></div>
            <div class="galleria-thumbnails-list" style="overflow: hidden; position: relative;">
                <div class="galleria-thumbnails" style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;">
                    <div class="galleria-image active">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                </div>
            </div>
            <div class="galleria-thumb-nav-right disabled"></div>
            <div class="galleria-thumbnails-tab" style="visibility: hidden;"></div>
        </div>
        <div class="galleria-info" style="position: absolute; left: -10000px; display: block; opacity: 1;">
            <div class="galleria-info-text" style="width: 1623px;">
                <div class="galleria-info-title" style="display: none;"></div>
                <div class="galleria-info-description">BOWDEN</div>
            </div>
        </div>
        <div class="galleria-tooltip" style="opacity: 0;"></div>
    </div>
</div>
</div>

这是它的CSS：

#galleria {
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    z-index: 1;
}

.galleria-container {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
.galleria-container {
    background: none repeat scroll 0 0 #FFFFFF;
}
.galleria-container, .galleria-stage, .galleria-images, .galleria-image img, .galleria-image-nav, .galleria-image-nav-left, .galleria-image-nav-right, .galleria-thumbnails-container, .galleria-info, .galleria-tooltip {
    margin: 0;
    padding: 0;
}

.galleria-stage {
    height: 100%;
    position: absolute;
    width: 100%;
}

.galleria-thumbnails-container {
    bottom: 0;
    padding-top: 16px;
    position: absolute;
    width: 100%;
    z-index: 2;
}
4

1 回答 1

1

选项1

如果您想在移动设备上将图库显示为内容块（不在背景中），您可以根据屏幕宽度通过媒体查询加载额外的 CSS。您必须覆盖position: absolute此额外文件中的一些内容才能使您的块恢复正常。

像：

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/mobile.css" />

或在现有的 css 文件中覆盖它：

@media all and (max-width: 1024px) {
    .galleria-container {
        position: relative;
    }

    /* and a lot more CSS ;-) */
}

选项 2

要在现有布局中使用滚动条，无论如何您都必须替换一些position: absoluteand float: left|right，以使您的内容恢复正常并扩展父 div 元素的高度：

html {
        overflow: auto !important;
}

body {
        overflow: visible !important;
}

#info {
    position: relative;
    float: none;
}

#product-details {
    position: relative;     
}

我测试了这个设置。滚动条现在在 iPad/iPhone 和 IE9+ 上可见。但是您必须调整边距和偏移量，因为我必须更改position值

见http://stephan.mestrona.net/finegra.in/products/bowden.html

于 2013-03-19T11:35:53.707 回答