о правилах СМИ .... (показать на мобильном телефоне)

Question

Как включить отображение элемента «IN P C» только на экране компьютера (не отображается на мобильном телефоне). Этот пункт меню имеет проблему (будет отображаться по-прежнему), озадачивая много дней, но все еще не может ее решить Где проблема и как ее решить.

Спасибо.

@media only screen and (max-width:768px) {.hide-phone { display: block; } }

http://www.ecotw.com.tw/vicky/hl-doc/test.html

Answer 1

Изменения после обновления вашего комментария:

Я проверил ваш код, чтобы что-то пошло не так или что вы можете сделать.

1. У вас есть div как прямой ребенок в вашем UL, который это плохой подход, вы должны использовать LI только как прямой дочерний элемент UL, а затем в LI вы можете использовать div или что угодно.

структура, подобная этой,

<ul class="nav sidebar-inner" id="sidebar-menu">
    <li class="has-sub">
    </li>
    <li class="has-sub"> 
    </li>
    <li class="has-sub">
    </li>
    <li class="has-sub">
    </li>
    <li class="has-sub">
    </li>
    <li class="has-sub desktop">
    </li>
    <li class="has-sub mobile">
    </li>
    <li class="has-sub">
    </li>
</ul>

LI с настольным компьютером класса, который вы хотите показать только на настольном компьютере, а LI с классом mobile - это та часть, которую вы хотите показать только на мобильном телефоне.

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

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

ПРИМЕЧАНИЕ: 767 - это то, что я имею в приведенном выше коде просто для демонстрации, вы можете изменить его на все, что вам нужно. примените точную логику c и сделайте правильный HTML, он будет работать на вас.