CSS实战笔记（11）——如何进行后台界面响应式设计？

本文共计1478个文字，预计阅读时间需要6分钟。

为了提升业务人员操作管理后台的体验，我们花时间进行了响应式设计的改造。紧急情况下，拿出手机就能工作。利用CSS3的媒体查询，就能根据不同屏幕尺寸采用不同样式来渲染。目前，+

　　为了提升业务人员操作管理后台的体验，花了点时间进行响应式的改造，紧急情况时，掏出手机就能工作。

　　利用CSS3的媒体查询，就能根据不同屏幕的尺寸采用不同的样式来渲染，目前使用的移动端屏幕阈值为750px。

　　为了便于管理，基于Less的语法，声明了一个常量，专门记录屏幕尺寸。

@mobile-screen: ~"(max-width:750px)";

　　我们当前使用的管理后台基于UmiJS3.X和Ant Design 3.X。

一、结构改造

　　首先是管理后台整体结构的改造，包括左边的菜单栏，右边的快捷按钮，登录信息等。

　　

1）菜单栏

　　左边的菜单在手机界面还是蛮占地方的，默认情况下需要将其隐藏，还有那张Logo图，也需要隐藏，最大限度的将区域留给菜单。

　　在下面的代码中，当URL的路径发生变化时，判断屏幕尺寸，如果当前是显示状态，那么就更新成隐藏状态。