Отображение текста на большом экране и значок на маленьком экране

Question

У меня есть меню, как

<ul id='menu'> 
      <li id='home' ><a href='index.php'><span class='menu_text'>Home</span><img class='menu_icon' src='_images/icons.svg#svg_home' alt=''/></a></li> 
      <li id='other'><a href='other.php'><span class='menu_text'>others</span><img class='menu_icon' src='_images/icons.svg#others' alt=''/></a></li> 
      ... 
      </ul> 

Теперь я хочу, чтобы отобразить текст с классом menu_text, когда размер экрана велик т.е. на ноутбуках и menu_icon должны оставаться скрытыми и наоборот, когда размер экрана мал, то есть на планшетах или мобильных устройствах, как я могу достичь его с помощью css?

Answer 1

Вы можете использовать CSS @media queries.

Большие экраны:

@media only screen and (min-width:1024px){ 

    .menu_text { display: block; } 
    .menu_icon { display: none; } 

    } 

Меньший экран

@media only screen and (max-width:480px){ 

    .menu_text { display: none; } 
    .menu_icon { display: block; } 

    } 

Вы можете изменить максимальные и минимальные ширины значений те, которые соответствуют вашим потребностям

Answer 2

Использование media queries.

Например, вы можете скрыть текст меню следующим образом:

@media screen and (max-width: 1024px) { 
    .menu_text { 
     display: none !important; 
    } 
} 

Answer 3

Это может быть сделано с помощью медиа-запрос.

CSS

#menu img { 
 
    display: none; 
 
    border: 1px solid #ccc; 
 
} 
 
/*For Ipad Portrait view and below that*/ 
 
@media (max-width: 768px) { 
 
#menu span { 
 
    display: none; 
 
} 
 
    #menu img { 
 
    display: block; 
 
} 
 
}

<ul id='menu'> 
 
      <li id='home' ><a href='index.php'><span class='menu_text'>Home</span><img class='menu_icon' src='_images/icons.svg#svg_home' alt='menu_icon'/></a></li> 
 
      <li id='other'><a href='other.php'><span class='menu_text'>others</span><img class='menu_icon' src='_images/icons.svg#others' alt='others'/></a></li> 
 
      
 
      </ul>

Answer 4

Пройдите по этой ссылке и скачать его. Responsive Retina-Ready Menu

и после этого просто добавьте этот носитель на страницу index.html в головной части

<style> 
     @media(min-width:504px) 
     { 
      .icon{ 
       display:none !important; 
      } 
     } 
     </style>