Скрыть элемент div, если размер экрана меньше определенного размера

У меня есть элемент div, который я хочу скрыть, когда ширина браузера меньше или равна 1026px. Можно ли это сделать на @media only screen and (min-width: 1140px) {} css: @media only screen and (min-width: 1140px) {} Если это невозможно с css, есть ли альтернатива?

Дополнительная информация: Когда элемент div скрыт, я не хочу пустой пробел. Я бы хотел, чтобы страница работала так, как если бы я полностью удалил элемент div из кода.

Я <div id="fadeshow1"></div>.

HTML5 Doctype.

Я использовал JavaScript, чтобы поместить галерею в этот div.

Я хочу, чтобы это выглядело так, когда ширина больше 1026 пикселей:

Я хочу, чтобы это выглядело так, когда ширина меньше 1026 пикселей:

Ответы

Ответ 1

Вы можете сделать это с помощью CSS:

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

Мы используем max-width, потому что мы хотим сделать исключение из CSS, когда экран меньше 1026 пикселей. min-width делает правило CSS для всех экранов шириной 1026 пикселей и больше.

Следует иметь в виду, что запросы @media не поддерживаются в IE8 и ниже.

Ответ 2

@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}

Каждый раз, когда размер экрана меньше 1026 пикселей, все, что находится внутри { }, будет применяться.

Некоторые браузеры не поддерживают мультимедийные запросы. Вы можете обойти это, используя библиотеку javascript, такую как Respond.JS

Ответ 3

Если вы используете bootstrap, вы можете просто использовать скрытый-sm (lg или md или xs) в зависимости от того, что вы хотите. Затем вы можете войти в файл css и указать проценты, которые хотите, чтобы они отображались. в приведенном ниже примере он будет скрываться на больших экранах, средних и дополнительных маленьких, но показывать на небольших экранах, беря половину экрана.

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>

Ответ 4

Я не знаю о CSS, но этот код Javascript должен работать:

    function getBrowserSize(){
       var w, h;

         if(typeof window.innerWidth != 'undefined')
         {
          w = window.innerWidth; //other browsers
          h = window.innerHeight;
         } 
         else if(typeof document.documentElement != 'undefined' && typeof      document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
         {
          w =  document.documentElement.clientWidth; //IE
          h = document.documentElement.clientHeight;
         }
         else{
          w = document.body.clientWidth; //IE
          h = document.body.clientHeight;
         }
       return {'width':w, 'height': h};
}

if(parseInt(getBrowserSize().width) < 1026){
 document.getElementById("fadeshow1").style.display = "none";
}

Ответ 5

Вам просто нужно использовать медиа-запрос в CSS для этого.

@media (max-width: 1026px) {
    #fadeshow1 { display: none; }
}

К сожалению, некоторые браузеры не поддерживают @media (смотря на вас IE8 и ниже). В этих случаях у вас есть несколько вариантов, но наиболее распространенным является Respond.js, который представляет собой легкий polyfill для минимальных/максимальных CSS3 запросов к мультимедиа.

<!--[if lt IE 9]>
    <script src="respond.min.js"></script>
<![endif]-->

Это позволит вашему гибкому дизайну функционировать в тех старых версиях IE.
* ссылка

Ответ 6

Это должно помочь:

if(screen.width<1026){//get the screen width
   //get element form document
   elem.style.display == 'none'//toggle visibility
}

768 пикселей должно быть достаточно

Ответ 7

@media только экран и (min-width: 1140px) должен выполнять свою работу, покажите нам свой файл css

Ответ 8

Самый простой подход, который я знаю, использует onresize() func:

   window.onresize = function(event) {
        ...
    }

Вот сценарий для него

Ответ 9

Вы должны использовать max-width вместо min-width.

<style>
    @media (max-width: 1026px) {
        #test {
            display: none;
        }
    }
</style>
<div id="test">
    <h1>Test</h1>
</div>