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

новичок в медиа-запросах 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;}
}

похоже, это не работает так, как задумано.

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


css responsive-design media-queries
person raklos    schedule 01.03.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Лучше всего сделать все стандартные стили удобными для мобильных устройств, а затем использовать 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 }
}

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

person ryanve    schedule 01.03.2012

arrow_upward
0
arrow_downward

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

/* 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 делает так, что что-либо с важным всегда перезаписывает все остальное, и это будет главным правилом независимо от того, где оно находится в файле.

person Chee Loong Soon    schedule 17.08.2015