Resize_document

by SamokhinDmitro_33JS

HTML

<button id="click">Click</button>
<div id="container">
    <div class="block">
        <p>Я блок</p>
    </div>
</div>

CSS

#container{
    margin:0 auto;
    max-width:700px;
    border: 2px solid blue;
}



.block{
    border:2px solid red;
    margin:0 auto;
    width:50%;
    background:yellow;
}

.new{

    background:green;
    width:100%;
    border:3px solid yellow;
    color:blue;
    font-size: 25px;
    box-sizing: border-box;
}


@media(min-width:960px) and (max-width:1300px){
    .block{
        background:red;
    }
}

@media(min-width:150px) and (max-width:500px){
    .block {

        background:grey;
    }
}

JavaScript

/*
Суть задачи: При размере окна до 500 px добавлять класс new к существующему классу block если более 500 px отображать
информацию как есть

В реальности для чего может понадобиться:

На сайте есть блок новостей или другие  инфо блоки вида
/Блок1/Блок2/Блок3


В мобильной версии данные блоки отобразить в виде слайдера-карусель

-существующим блокам добавить класс карусели и тд (например готовый слайдер owlcarousel)

 */



//1/ Обычное добавление класса по клику
/*
var click= document.getElementById('click');

click.addEventListener('click', getBlock);


*/


 
 //2/ по клику узнаем размер окна браузера
 var doc=document.documentElement.clientWidth; // ширина окна браузера 1366 при любом размере окна

//var doc =window.outerWidth;//отрабатывает один раз, требуеться перезагрузка страницы

var click= document.getElementById('click');


window.addEventListener('resize', function(){
   // alert(document.documentElement.clientWidth);
    
    
});
  




//Резульат, как без перезагрузки страницы вернуть старое расширение
/*
var doc =window.outerWidth;

if(doc<=500){
    alert('500');
    var block=document.getElementsByClassName('block');

    for(var i=0; i<block.length; i++){
        // block[i].style.width='50px';
        block[i].classList.toggle('new');
    }
}
else{
    alert('Ничего');
}

*/