Как скрыть меню значков на больших экранах?

Я новичок в этом и даю знать, как скрыть значок меню, и он автоматически добавляется без запроса, я хочу показывать только на небольших экранах. Извините за плохой английский.Как скрыть меню значков на больших экранах?

Thank you.

источник

2015-07-12 Juan Henriquez

нет необходимости беспокоиться о английском. можете ли вы определить большой экран? В любом случае, вы можете определенно определить размер экрана. Например, используя jquery, $ (window) .height(); $ (document) .height(); $ (Окна) .width(); $ (документ) .width(); – dshun

извините, маленький код, который я добавил в комментариях, выглядит уродливым. но в любом случае, обратитесь к этому http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window, чтобы узнать, как вы можете получить экран size, то отобразите/скройте свое меню соответственно – dshun

@dshun Если вопрос не помечен jQuery или не задан непосредственно для jQuery, лучше не предоставлять решение jQuery. Решение доступно непосредственно из MDL без лишних лишних вещей. – Garbee

Вы можете использовать mdl-layout--fixed-drawer, используя тот же элемент, который вы используете mdl-js-layout, чтобы получить фиксированный ящик на рабочем столе, который должен удалить кнопку, чтобы просмотреть его, и оставить его открытым для доступа.

источник

2015-07-13 00:07:02 Garbee

Мне пришлось обратиться к медиа-запросу, чтобы решить мою проблему.

@media only screen and (min-width:851px){ .mdl-layout__drawer-button { display: none; } }

Это лучшее решение, которое я нашел, благодаря @dshun и @garbee за помощью.

источник

2015-07-14 01:27:28

он скрывает кнопку, но оставит неиспользованное пространство –

Другим способом достижения этого является добавление различных классов размера экрана, таких как

mdl-layout--small-screen-only

. Вот пример:

<div class="mdl-layout__drawer mdl-layout--small-screen-only"> 
    <span class="mdl-layout-title">Drawer Title</span> 

    <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="">Link 1</a> 
     <a class="mdl-navigation__link" href="">Link 2</a> 
     <a class="mdl-navigation__link" href="">Link 3</a> 
    </nav> 
</div>

Приносим извинения, если этот сниппет не подходит для вас. Я просто заметил, что подобный вопрос здесь, на StackOverflow, решение может быть более подходящим: How can I hide drawer on large screens and show just on small screens.?

источник

2015-07-26 07:14:30 Derjyn

Можете ли вы ответить на вопрос в этой связи - https://stackoverflow.com/questions/45754638/different -mdl-макет ящика-для-большой экран-и-мал-экрана-в-леях –

эффективное решение, которое я нашел, и что, наконец работает в:

<style> 
     @media screen and (min-width: 992px) { 
     .mdl-layout__drawer-button { 
      /* Hide the Hamburger button but will leave an unused space */ 
      display: none; 
     } 
     .mdl-layout__header-row { 
      /* so important to make sure the Hamburger button didn't leave an unused space */ 
      padding-left: 24px !important; 
     } 
    } 
</style>

источник

2016-02-17 01:15:02