响应式整改后台

[songjinzang14]

  为了提升业务人员操作管理后台的体验，花了点时间进行响应式的改造，紧急情况时，掏出手机就能工作。利用CSS3的媒体查询，就能根据不同屏幕的尺寸采用不同的样式来渲染，目前使用的移动端屏幕阈值为750px。

  为了便于管理，基于Less的语法，声明了一个常量，专门记录屏幕尺寸。首先是管理后台整体结构的改造，包括左边的菜单栏，右边的快捷按钮，登录信息等。

  第一个部分是：菜单栏。原显示界面上左边的菜单在手机界面还是蛮占地方的，默认情况下需要将其隐藏，还有那张Logo图，也需要隐藏，最大限度的将区域留给菜单。在Chrome的控制台，切换成手机屏幕时，右半部分会出现挤压的问题。

  可以将右半部分设置为绝对定位，脱离正常流，再向左偏移菜单栏的宽度就能避免内容被挤压。之后就到了整改快捷键部分，快捷按钮有3个，PC界面这块的高度是固定的，并且是横向布局。移动端的屏幕比较窄，更适合纵向布局。并且为了节约空间，登录后的昵称，也隐藏了，免得破坏布局。
　
  第三个部分是全局样式。这些按钮默认是没有上下间距的，需要手动添加，例如修改Ant Design 的下拉框、搜索框、日期选择框的下边距，存储在 global.css 文件中。在之前的页面开发中，很多组件的宽度都是以内联的方式声明的。当时的确很方便，但是现在改造给我制造了障碍。

  如果直接在CSS文件中声明，那么特殊性不会比内联的高，也就不会生效，所以得用另一种方式。后面就想用脚本来做样式的更新，脚本比较好写。但是需要考虑一种情况。那就是页面初始化时不存在的DOM元素，需要点击或其他交互后才能被添加进来。因为需要监听DOM的变化，所以自然就想到了MutationObserver。