Metro ui css 响应式答案

【问题标题】：Metro ui css responsiveMetro ui css 响应式
【发布时间】：2017-02-01 05:39:53
【问题描述】：

我正在使用 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%;
    }
}

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

【问题讨论】：

标签： jquery html css responsive-design metro-ui-css

【解决方案1】：

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

【讨论】：