Дисплей CSS на мобильном и рабочем столе

Question

Мне было трудно исправить это. Может быть, я просто очень люблю на css. В принципе, я хочу, чтобы значок был виден только в мобильной версии сайта.

in above 767px Я поставил этот код, чтобы я скрылся. .neighbourhood-img img {display:none;}

Мой вопрос, как я могу сделать его видимым в поле ниже 767px ширина ..

Спасибо!

Answer 1

Что вам нужно, это media queries. Попробуйте с:

@media screen and (min-width: 768px) { 
    .neighbourhood-img img {display:none;} 
} 

Он будет скрыт, если ширина экрана составляет по меньшей мере 768px

Вы можете прочитать больше о media queries здесь:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

Использование Css Класс:

.neighbourhood-img img 
{ 
display:block; 
} 

Answer 3

эй чек из этого CSS

@media screen and (min-width: 768px) { 
    .neighbourhood-img img {display:none;} 
} 

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

     .neighbourhood-img img {display:block;} 

} 

Answer 4

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

Answer 5

Думаю, я понимаю, о чем вы просите. Если вы хотите только видимы на мобильной версии, то вы можете сделать следующее:

сделать новое правило CSS:

@media only screen and (max-width: 767px) { 
    .m-show { 
     display: block !important; 
     max-height: none !important; 
     overflow: visible !important; 
    } 
} 

Затем завернуть значок в сНу тег, как показано ниже, с стиль, чтобы скрыть его (но сделать его класс в м-шоу класс):

<div style="display: none; max-height: 0; overflow: hidden" class="m-show"> 
Your hidden content here... 
</div> 

Это будет скрывать его, если он не в том, что ширина макс 767, в противном случае он будет показывать. Надеюсь, это имеет смысл. Я также предложил бы сделать этот встроенный стиль в теге div отдельным классом CSS (только потому, что мне не нравится встроенный стиль).