1

我正在使用 Metro UI css 制作网站；能够创建图块区域并指定单个图块，但我遇到了一个问题，使其对移动设备做出响应，因为一些图块在使用较小的设备时会从屏幕延伸。

到目前为止，这是我的代码

    <body class="content" id="main">

    <div class="tile-area fg-white" style="height: 100%; max-height: 100% !important;">
        <h1 class="tile-area-title">HERMA</h1>

        <div class="tile-group double">
            <div class="tile-container">
                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>
            </div>
        </div>
        <!-- ./tile-group double -->

        <div class="tile-group double">
            <div class="tile-container">
                <div class="tile-large bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>
            </div>
        </div>
        <!-- ./tile-group double -->

        <div class="tile-group double">
            <div class="tile-container">
                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>

                <div class="tile-wide bg-green fg-white" data-role="tile">
                    <div class="tile-content iconic">

                    </div>
                </div>
            </div>
        </div>


    </div>
</body>

和页面的css

.content:before
{
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;

    display: block;
    background-image: url("/img/dark-abstract-hd-wallpapers.jpg");
    background-size: cover;
    data-role: fitImage;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.content
{
    position: fixed;
    left: 0;
    right: 0;
    z-index: 0;
    margin-left: 20px;
    margin-right: 20px;
}

#main
{
    width: 100%;
    position: relative;
    margin: 0 auto;
    line-height: 1.4em;
}

@media only screen and (max-width: 479px)
{
    #main
    {
        width: 90%;
    }
}

什么是让它响应的方法，所以假设我减小了我的计算机屏幕尺寸或使它对移动设备响应，那么屏幕可以滚动。我在这里先向您的帮助表示感谢。

4

1 回答 1

0

尝试使用Chrome浏览器调试面板中的“切换设备”按钮（左上角），可以用F12打开，而不是更改整台计算机的屏幕分辨率。那么问题可能会消失。

于 2016-10-16T18:16:14.573 回答