Скрыть тег div только на мобильный просмотр?

Я создаю жидкую компоновку для сайта. Я пытаюсь скрыть содержимое <div> или всего <div> себя в мобильном представлении, но не представление планшета и рабочего стола.

Вот что у меня до сих пор...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

У меня установлен дисплей на "нет" для мобильного макета и задан как блок на макетах планшета/рабочего стола... Есть ли более простой способ сделать это, или он есть?

Ответ 1

Вам понадобятся две вещи. Первым является @media screen, чтобы активировать конкретный код с определенным размером экрана, который используется для гибкого дизайна. Второй - использование атрибута visibility: hidden. Когда браузер/экран достигнет 600 пикселей, тогда #title_message станет скрытым.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDIT: если вы используете другой CSS для мобильных устройств, просто добавьте visibility: hidden; в #title_message. Надеюсь, это поможет вам!

Ответ 2

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

Это будет для отзывчивого дизайна с отдельной страницей для экрана iphone. Вы действительно направляетесь на другую мобильную страницу?

Ответ 3

Задайте для свойства отображения значение none по умолчанию, затем используйте мультимедийный запрос для применения желаемых стилей к div, когда браузер достигнет определенной ширины. Замените 768px в запросе на медиатеку любым минимальным значением px, где ваш div должен быть видимым.

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}

Ответ 4

Вы можете руководствоваться этим примером. В файле css:

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

В html файле:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Ответ 5

Данное решение не работало для меня на рабочем столе, оно просто показало оба divs, хотя мобильный только показывал мобильный div. Поэтому я сделал небольшой поиск и нашел опцию min-width. Я обновил свой код до следующего, и теперь он отлично работает:)

CSS

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Ответ 6

попробуйте это

@media handheld{
    #title_message { display: none; }
}