浏览器窗口缩放后,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;
}