Почему не работает @media?

[nikki4]

Задача: на экранах с шириной до 480px убрать сайдбары, после чего заполнить их место контентом.

 

Что сделал: в общем css файле в самом верху прописал:

@media=only screen and (max-device-width:480px) {#sidebar1,#sidebar2 {display:none;}#wrapper {max-width:480px;}#header, #menu, #content, #footer {width:100%;}}/* далее идет основной css для всех */

Тестирую в файрфоксе инструментами для разработчика. Ничего не меняется.

 

Вопрос: что сделать, чтобы заработало?

 

 

 

[Great Rash]

Потому что у вас ошибка в синтаксисе.

[satantx]

Скиньте ссылку на страницу, как мы то проверим, работает или нет?

Почему после @media стоит = ?

Edited April 2, 2015 by satantx

[nikki4]

Спасибо. Заработало.

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

Поставил для каждого свойства !important где для мобильного, все ок.

 

Но правильно ли я делаю, может это по другому как-то делается?

[Great Rash]

На будущее, запомните железное правило верстки: если вам понадобился !important, значит вы на 95% что-то не так делаете и стоит перепроверить/переделать верстку. Как правило все стили @media пишут в самом низу после остальных правил.

[satantx]

  On 4/2/2015 at 8:33 AM, Great Rash said:

На будущее, запомните железное правило верстки: если вам понадобился !important, значит вы на 95% что-то не так делаете и стоит перепроверить/переделать верстку. Как правило все стили @media пишут в самом низу после остальных правил.

 

Золотые слова

[Sergik+]

  On 4/2/2015 at 8:33 AM, Great Rash said:

На будущее, запомните железное правило верстки: если вам понадобился !important, значит вы на 95% что-то не так делаете и стоит перепроверить/переделать верстку. Как правило все стили @media пишут в самом низу после остальных правил.

Откуда такое правило ? Насколько я знаю единого мнения по данному вопросу нету.

Мне удобнее медиа писать прямо по ходу sass, никаких !important нету и все работает.

[Great Rash]

  On 4/2/2015 at 10:29 AM, Sergik+ said:

Откуда такое правило ?

Жизненный опыт после 10 лет в профессии. 

[Sergik+]

  On 4/2/2015 at 11:52 AM, Great Rash said:

 

  On 4/2/2015 at 10:29 AM, Sergik+ said:

Откуда такое правило ?

Жизненный опыт после 10 лет в профессии. 

 

Читал статьи скиловых верстальщиков что кто как медиа пихает единого стиля нету,

мне не понравилось медиа разносить - поэтому и пишу что пишите как удобно.

Вот с ходу вам http://sass-guidelin.es/ru/#%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BC%D0%B5%D0%B4%D0%B8%D0%B0-%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2

Не надо просто говорить что свое мнение единственное правильное, много можно

по разному сделать.

Edited April 2, 2015 by Sergik+

[Great Rash]

  On 4/2/2015 at 12:06 PM, Sergik+ said:

Не надо просто говорить что свое мнение единственное правильное, много можно по разному сделать.

Я про !important писал. 

[nikki4]

а понял, я забыл добавить кое что... вопрос отменяется

Edited April 2, 2015 by nikki4

[Switch74]

а он не должен?

уточним один момент: у вас есть

1. общий стиль и для ПК и для КПК

2. у вас есть стиль для КПК, который добавляет/изменяет общий стиль

 

теперь вы добавляете что-то в стиль для КПК чего не было в общем и он применяется для КПК и ПК?

[forest_moss]

  On 4/2/2015 at 8:26 AM, nikki4 said:

Спасибо. Заработало.

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

Поставил для каждого свойства !important где для мобильного, все ок.

 

Но правильно ли я делаю, может это по другому как-то делается?

 

если хотите уже заданный стиль изменить для какого-то типа экрана, то надо его выносить тоже в правила медиа.

т.е. например, предположим, обычная высота блока 300px, а для мобильного 200px. в таком случае писать надо не так:

.block{height:300px}@media (orientation:portrait){ .block{height:200px} }

а надо писать вот так:

@media (orientation:landscape){ .block{height:300px} }@media (orientation:portrait){ .block{height:200px} }

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

[Great Rash]

  On 4/3/2015 at 1:28 AM, forest_moss said:

если хотите уже заданный стиль изменить для какого-то типа экрана, то надо его выносить тоже в правила медиа.

Не надо вроде. Правило ниже просто переопределит верхнее. 

[forest_moss]

  On 4/3/2015 at 7:41 AM, Great Rash said:

  On 4/3/2015 at 1:28 AM, forest_moss said:

если хотите уже заданный стиль изменить для какого-то типа экрана, то надо его выносить тоже в правила медиа.

Не надо вроде. Правило ниже просто переопределит верхнее.

по сути конечно не обязательно, если последовательность подходящая, но, имхо, желательно, чтобы не было путаницы. Переместил правило с медиа наверх - и все полетело.

К тому же вроде как телефону тогда меньше нагрузки, потому что только однин кусок информации вместо двух принимает. Мне так кажется.Или это не так?

[Switch74]

не так

[forest_moss]

  On 4/4/2015 at 6:05 AM, Switch74 said:

не так

а как тогда? которую информацию обрабатывает телефон?

[Switch74]

всю, которую он загрузит, ту и обрабатывает

[forest_moss]

  On 4/4/2015 at 5:12 PM, Switch74 said:

всю, которую он загрузит, ту и обрабатывает

т.е. если для обычного экрана в медиа заданы гипер-навороченые тени, а для телефона заданы отсутствующие, то телефон все равно сначала попробует построить навороченые?

ведь не начинает же браузер "строить" стили только тогда, когда все "прочитает"?

[Switch74]

стили он загрузит все, обработает он их тоже все, а вот применять будет только те, которые останутся активными после обработки

[Int]

  On 4/3/2015 at 10:49 PM, forest_moss said:

Переместил правило с медиа наверх - и все полетело.

Это можно применить почти ко всему CSS. Если сперва задать стиль родителю, а потом у потомков этот стиль уточнять, то перемещение стиля потомков выше стиля родителя всё сломает, но это же не повод отказываться от CSS? Я когда учился в универе, видел как некоторые на паскале пытались сделать кучу writeln каких-то переменных, а потом кучу readln этих же переменных. Мол, в программе же есть чтение, значит оно должно идти пере выводом на экран. Вот только программ об этом не знает. Нужно всего лишь запомнить, что файл читается сверху вниз, и никаких проблем с приоритетами не будет.

Ну а если уж очень надо, то в глобальном стиле пишешь .class, а в @media-стиле — div.class