Как правильно использовать медиа-запросы CSS для адаптивного дизайна - PullRequest
Новая
       9

Как правильно использовать медиа-запросы CSS для адаптивного дизайна

0 голосов
/ 27 ноября 2011

У меня проблема с медиа-запросами.Я хочу, чтобы мой основной div имел ширину 960 пикселей, но если экран меньше 960 пикселей - я хочу, чтобы он составлял 80% от любой текущей ширины.

Я получаю только 80% от 960 пикселей, а не80% от всего меньшего (например: 80% от 800px, 80% от 700px).

HTML: 

<body>
    <div class="main">
         Some big amound of text
    </div>
</body>

CSS: 

body{
    width:100%;
}

.main {
    display: block;
    height: 600px;
    width: 960px;
}

@media (max-width: 960px) {
    .main {
        width:80%;
    }
}

Я хочу, чтобы он был жидким, но он зафиксирован только в 2 положениях: 960px и 80% от 960px - как мне сделать его текучим?

Ответы [ 2 ]

3 голосов
/ 28 июня 2012

Ради всех, кто находит это - Firefox поддерживает медиазапросы с версии 3.5. Я не уверен, почему ваша копия FF5 не работала, но это было не из-за отсутствия поддержки медиа-запросов. Вот демонстрационная страница. Я тестировал его в FF3.6, и он отлично работает: http://oscorp.net/experiments/media-queries/

1 голос
/ 27 ноября 2011

Я решил проблему -

Я использовал Firefox 5.0, который, как я полагаю, не поддерживал эту функцию - я думаю, что это была проблема.

...