基于element的网站自适应方案（移动端适配）

      一般而言，管理系统类的网站我们往往会按照PC的标准来设计，不会去考虑小屏幕的适配，甚至是移动端的适配，因为这种系统网站往往涉及到大量的列表查询页（表格列往往很多，列内容长短不一），详情页（信息展示量大且分栏排布，例如一屏展示4列内容，或5列内容），数据分析的图表页（含有大量图表，例如折线图，柱状图，饼图）等等。为了获得最佳的视图效果，使用者都会选择在电脑上浏览页面。如果产品经理要求在移动端查看也能获得良好的效果，那我们就需要重新设计我们的网站了。网站自适应的核心是在不同的屏幕尺寸下合理的展示网站的内容，要完成这一点主要依赖基于媒体查询的栅格系统（如果想要自己设计栅格可以参考bootstrap）和组件级别的尺寸展示控制，另外有一些内容在小屏的时候应该要以合理的形式进行区分展示，例如原本固定的侧栏菜单导航会变成自左向右的可控抽屉式导航，标签页导航会被替换成简单的面包屑导航等等。下面就以element为UI框架的系统设计为例,介绍一下在网站适配上需要注意的点。

     不管使用何种第三方UI框架中的组件，一定要记得做二次封装，这样的意义在于可以统一控制组件的默认展示效果，例如设置适合自己网站的组件主题样式，组件宽度，文本占位符等等。

1. 固定菜单导航替换成抽屉式导航，此实现依赖于基于断点的隐藏类（hidden-md-and-down，hidden-md-and-up等等）控制组件展示与否，以及Drawer 抽屉组件。
2. 导航页签换成面包屑导航，一些小部件的位置移动例如用户头像等等。
   下面是1和2实现的效果动图：