瀏覽器窗口縮放后,Layui左側菜單、中間內容伸縮處理

Jquery有個方法animate，頁面頭部放一個按鈕，寫上Jquery事件

layui-side 左側菜單class

layui-body 中間頁class

大概就是判斷了左側菜單的left屬性，如果是正常狀態，將左側菜單100毫秒速度縮進-221px,中間頁面則隨之更改，else就反着過來了。

if ($('.layui-side').css('left') == '0px') {
        $('.layui-side').animate({ left: '-221px' }, 100);
        $('.layui-body').animate({ left: '0px' }, 100);
} 
else {
         $('.layui-side').animate({ left: '0px' }, 100);
         $('.layui-body').animate({ left: '221px' }, 100);
       }

不經過按鈕的處理就這樣寫,屏幕最小到768的時候，更改css樣式。

 @media screen and (max-width: 768px) 
 {
    .layui-side {
    left: -221px;
 }

.layui-body 
{
    left: 0px;
}