Как работает media css?

Question

[lexstile]

Прописываю:

@media (max-width: 767px){
	.breadcrumb{
		display: none;
	}
}

Правильно понимаю, что >= 767 ?
Показываем только начиная с 768px ?
У меня оно отображается на 767px. - мне этого не нужно, надо начиная с 768 и выше (больше, либо равно 768px)
Прописываю:

@media (max-width: 768px){
	.breadcrumb{
		display: none;
	}
}

Отображается с 769px.

Comments

[lexstile]

Пишу:

@media (max-width: 767px){ /* Отображается >= 767px */
	.breadcrumb{
		display: none;
	}
}
@media (max-width: 768px){ /* Отображается >= 769px */
	.breadcrumb{
		display: none;
	}
}

Как получается так, что пропускается 768?

[iBird Rose]

767 - нету - skrinshoter.ru/i/231017/7s1iYIUR.png
768 - нету - skrinshoter.ru/i/231017/DYnRfAud.png
https://jsfiddle.net/guthf56o/
в общем сам тупишь где то

[lexstile]

iBird Rose,

[Ankhena]

наоборот
@media (max-width: 767px)
максимальня ширина при которой срабатывают правила - 767
т.е. <= 767px

[lexstile]

Ankhena, я все понимаю, но у меня не срабатывает почему-то.
Мне надо скрыть блок на ширине < 768px.
Я для этого и прописал max-width: 767px - display:none;
но при такой записи блок все равно отображается при ширине 767, хотя не должен.
И в чем может быть дело я уже не знаю...

[lexstile]

Ankhena, Скриншот тому подтверждение в предыдущем комментарии.
Ширина - 767, правило для <=767
А он все равно display:block

[Ankhena]

lexstile, да? а с чего вы взяли, что это 767?
Откройте свой скрин в фотошопе, да проверьте сколько это

[Ankhena]

lexstile, откройте настройки экрана


у вас, похоже будет стоять 125%

[y0u]

lexstile, ты не на скриншот смотри, а на пример, который тебе скинули. Всё там работает так, как нужно https://jsfiddle.net/guthf56o/

Тебе пора отдохнуть, видимо. Такое бывает, когда долго мучаешься и ничего не получается.

[lexstile]

Ankhena, да,сейчас 125% стоит

[lexstile]

y0u,
Похоже надо завязывать, благодарю за совет :)

[Ankhena]

lexstile, так все работает :)

[lexstile]

Ankhena, так нет же...( display: none должно на 767, а на 768 display:block
разве нет?

[lexstile]

Ankhena, на другом пк работает все корректно :(

[Ankhena]

lexstile, смотрите ширину через инспектор. Все работает.

[lexstile]

Ankhena, я через инспектор и смотрел.
Так может из-за 125% тех? нет?
я просто не успел поменять и посмотреть при 100%

[Ankhena]

lexstile, по логике те 125 не должны влиять. Но может у вас еще масштаб где-то не 100%

[lexstile]

Ankhena, возможно, попробую вечером в настройках покопаться, спасибо за отклик огромное, в нужное русло натолкнули.

Answer 1

[Андрей Павленко]

Наоборот, @media (max-width: 767px) значит: "применять только для ширины браузера максимально 767 пикселей включительно".
Если нужно правило "только для браузеров, у которых ширина больше 768 пикселей и ровно" применяйте:
@media (min-width: 768px)

Comments

[lexstile]

Ну так у меня и стоит media (max-width: 767px) - display: none; - а блок показывается на 768px
эм, а нельзя ли строго меньше 768px?