адаптивный дизайн css3 показывают на маленьких экранах не на больших

Question

плохо знакомы с медиа-запросами css3 и адаптивным дизайном.

Я хотел бы знать, как показать что-то (скажем, div) только на маленьких экранах, но не на больших экранах. Я пробовал что-то вроде:

@media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}

... и что-нибудь большее имеет, например:

@media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}

Кажется, он не работает как задумано.

, возможно, стоит отметить, что я использую загрузчик 2.0

Answer 1

Лучше сделать все ваши стили по умолчанию удобными для мобильных устройств, а затем использовать min- медиазапросы для увеличения:

div { /*put whatever your default styles are first*/ }

/* Then use the media query to hide it at 481 and wider */
@media all and (min-width:481px) {
    div { display:none }
}

Посмотрите на 320 и и Скелет и CSS на этой странице для примеров.Посмотрите на вспомогательные классы внизу этого CSS , чтобы найти различия между невидимым / скрытым и т. Д.

Answer 2

Вы можете поставить это первым

/* for small screens, only execute in if statement */   
@media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
    visibility:visible!important;
    display:block!important;
}}

Затем поместите его внизу для больших экранов (всегда выполняйте, поскольку не в операторе if)

.smallOnly {
visibility: none;
display: none;}

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