Метро пользовательский интерфейс css отзывчивый

Я делаю веб-сайт с помощью 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%;
    }
}

как сделать его отзывчивым, чтобы можно было прокручивать экран, если я уменьшил размер экрана своего компьютера или сделать его отзывчивым для мобильных устройств. Спасибо за помощь заранее.


html jquery css responsive-design metro-ui-css
person CE0    schedule 23.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать кнопку «Переключить устройство» (в верхнем левом углу) в панели отладки браузера Chrome, которую можно открыть с помощью F12, вместо изменения разрешения экрана всего компьютера. Тогда проблема может исчезнуть.

person overt    schedule 16.10.2016