Почему сбиваются стили?

Question

[Андрей Смирнов]

Есть два стиля для одного класса - одна версия для мобилы, другая для ПК. Вопрос: может в чем-то я ошибся, но эти стили перебивают друг друга и работают последние стоящие, почему?
Вот код данных стилей:

@media screen, handheld and (max-width: 520px){
	.blog_article_pict{
		clip: rect(40px, auto, auto, 40px); 
		margin-right: 20px; 
		width: 100%;
	}
}
@media screen, handheld and (min-width: 560px){
	.blog_article_pict{
		clip: rect(40px, auto, auto, 40px); 
		margin-right: 20px; 
		display: block; 
		height: 245px; 
		width: 60%; 
		float: left;
	}
}

В данном коде работает последний написанный стиль везде - на мобиле и ПК.
Попробовал вместо max-width и min-width: max-device-width и min-device-width соответственно. Результат тот же.

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

Спасибо, проблема решена - просто убрал handheld в последнем media.

Answer 1

[Котик Антон]

Потому что под последний media-запрос подойдут любые устройства с экранами:
@media screen, handheld == screen or handheld

Answer 2

[tigra]

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

Answer 3

[Михаил Чирский]

У вас сначала идет max-width, а потом min-width, я думаю стоит разобраться, как работают свойства, пока я вижу у вас нет понимания этого.

Comments

[Андрей Смирнов]

не пишите, пожалуйста, чушь. Да, я может неопытный(да что греха таить, безопытный) верстальщик, но я могу понять основы media запросов, где сперва указывается в ОДНОМ медиа min-width а потом max-width. У меня указано наоборот, так как у меня ДВА медиа запроса и там уже все равно как их располагать так как в каждом из них работает только одно условие в первом для устройств с расширением не более 520px, а второе медиа подразумевает устройства с шириной не ниже 560px. И в чем у меня нет понимания? Объясните тогда, а я пойму.

[Михаил Чирский]

Андрей Смирнов: советую все же ознакомится, чтобы вы понимали, и не кидались на людей) скажу 1 в 1 случае, когда у вас min-width, то начинается от меньшего к большему, во 2 случае когда вы исп. max-width, то начинается от большего к меньшему, ну раз вы все понимаете, зачем задавать вопросы. Ну а посоветовать могу делать как у Bootstrap писать от и до, пример min-wdith: 768px max-width: 1019, таким образом, эти стили не попадут не ниже не выше, т.к строго заданные рамки, это все, что я могу вам посоветовать.
P.S. кидаться на людей не стоит.

[Андрей Смирнов]

Михаил Чирский: ознакомиться ознакомлюсь, конечно. Извините, что это выглядело как нападение, но я не подразумевал ничего под этим. Просто меня Ваш коммент очень заинтересовал и поэтому я Вас попросил объяснить чего я не понимаю. А спрашивал я вопрос просто, почему стили перебивались) Как итог был получен ответ, что перебивались из-за того, что у меня был handheld прописан в media где начинается с 560px ширина. А так да, я сам не против писать от и до, но так написал пока лишь черновой вариант. Уже давно исправил и написал от и до) И спасибо за то, что вы заметили такие интервалы)

[Андрей Смирнов]

Михаил Чирский: единственное, что меня смущает до сих пор - я не знаю какой максимум делать для последнего медиа-запроса, потому что не имею знаний какая максимальная ширина наших устройств.

[Михаил Чирский]

Андрей Смирнов: Ну мы обычно смотрим статистику посещений по разрешениям, и отдаем отчет самым приоритетным, у всех они разные, ну могу заверить вас, что от 0 до 460, считается мобильной версией, хотя сейчас уже делают и до 640, а bootstrap до 767, все что выше он считает таблеткой. Очень советую изучить как сделано у них и у многих других фреймворков, и решить для себя, как удобнее вам.