Responsive自适应
通过多种方式实现多终端自适应responsive，通过@media min/max-width做宽度适配查询，通过终端自适应样式_xxs-1,_xs-2等实现自适应，通过@media any-hover做移动端终端适配查询，通过breakpoints函数做断点参数设定，通过_hide-xxs~lg进行不同终端隐藏元素。
浏览器宽度适配
我们着眼于浏览器的可见区域，如果可见区域变小，那么左右两侧的辅助内容应该隐藏，隐藏的东西不应该永远不可见（hide-xxs~lg），所以导航应该发生变化，即至少显示一个按钮用于打开已经被隐藏的内容。
主体内容区域应该全宽显示，原本一行多列的板块应该自动取消一行多列，甚至以一行一列显示（flex布局和grid布局的自适应）。
本框架通过@media min/max-width做宽度适配查询
//小屏
@media screen and (max-width: 500) {}
//大屏
@media screen and (min-width: 1200) {}
宽度断点
目前手机竖屏最大尺寸是480px左右，主要平板竖屏宽度小于800px左右；普通平板横放宽度大概是1024左右，与高清平板竖放宽度差不多。
另外普通笔记本电脑宽度最小宽度是1366px或者1440px，高清平板横放与普通笔记本电脑的宽度差不多，22尺寸大屏显示器宽度通常是1920px。
所以500px，900px，1200px，1500px应该是设备屏幕宽度重要分水岭。
本框架根据宽度断点做了如下规定：
| 宽度范围 | 代号 | 说明 |
|---|---|---|
| <500 | xxs | 手机竖 |
| >500 & <900 | xs | 平板竖 |
| >900 & <1200 | sm | 平板横 |
| >1200 & <1500 | md | 笔记本电脑 |
| >1500 | lg | 桌面电脑 |
我们知道了宽度断点，那么我们可以顺利的做出一些推断：
_hide-xxs样式类的意义是：在手机竖屏下隐藏_grid _xxs-2样式类的意义是：grid布局在手机竖屏下一行显示两列
终端类型适配
移动端和桌面端的特点有许多不同之处：
- 桌面端可以使用鼠标精确控制，移动端只能使用手指模糊触控
- 桌面端有
hover事件，移动端则没有，在移动端无法使用鼠标悬停的功能 - 桌面端有鼠标右键事件，移动端则没有，可能需要使用长按模拟右键
- 移动端的屏幕普遍是renita屏幕，像素精度高，相同px单位的按钮在移动端上会显得很小
他们的不同应该还不止这些，在css中表现的差别可能有以下几点：
- 在移动端需要将字号做大
- 在移动端需要将桌面端的hover事件改为
touch事件 - 桌面端需要美化滚动条，而移动端则不需要
- 桌面端文字较多的板块，在移动端应该较少显示的内容并做隐藏处理
本框架通过@media any-hover做终端适配查询
//移动终端
@media (any-hover: none) {}
//桌面电脑
@media (any-hover: hover) {}
