「Mobi.css」轻量，灵活的移动端 css library， built with love

[xcatliu]

最近做了一个 css library ，颇废了一番功夫。

这里先把它分享给大家，欢迎 star ，欢迎试用！

• GitHub
• Homepage

PS ：将来 Homepage 会转到 http://getmobicss.com/ ，目前这个域名我已经买了，但是说需要 60 天才能转移。

简单介绍

Mobi.css 是一个轻量，灵活的移动端 css library 。特点如下：

• 只有 2.8kb after gzip ，比 Skeleton, Pure.css, Bootstrap v4 等所有 css 库都小
• 大量使用 Flexbox ，非常灵活， Homepage 基本上没有写额外的 css ，只有不到 10 行的 inline-style
• Focus on mobile ，在 desktop 端相当于展示的还是 mobile 的页面，不过可以在左侧或右侧加上侧边栏

更多介绍请看 Homepage

最后奉上 Mobi.css 的 Logo

[ChiangDi]

现在一般要求兼容到安卓 4.0 以上

[avenger]

目前在用 PureCss ，看楼主的描述，所以这个是专门为 mobile 设计的了？
除了文件更小以外，能说说其它优势吗？重新造一个轮子的意义何在？

[arens]

已 Star ，支持纯 CSS 框架，希望能继续维护

[hjse7en]

移动端，代码块宽度占满屏幕，看着难受

[xcatliu]

@newbieo0O 感謝測試，稍後修正一下。

[xcatliu]

@arens 感謝支持

[xcatliu]

@hjse7en 主要是考慮到移動端屏幕太小了，看代碼不方便，能大一點區域就大一點

[xcatliu]

@avenger 感谢关注， Purecss 确实是一个很好的 css library ，我也参考了一些它的代码。下面回答一下你的问题。

Mobi.css 是专门为 mobile 设计的。针对 desktop 只保留了一个 sidebar 用于放二维码等不需要展示在 mobile 的内容。

其他优势：

1. 2.8kb vs 4.6kb 其实并不算优势， Mobi.css 后面可能会更大一些。但是应该会保持在 4kb 以内。所以并不是强调它是最小的吧，只是借此说明它重视移动端的小体积。
2. Mobi.css 重度依赖于 flexbox ，在很多场合它比传统的 css 更适合 grid ，也更加灵活。相信未来拥抱 flexbox 是一个趋势。
3. 提供一些针对移动端的样式，比如 scrollable ，将来会添加一些常用的。
4. 提供一些移动端开发的小技巧。

老实说 Purecss 是一个很好的选择，基本上需要的功能都有。而且足够小。不过如果只需要做移动端页面的话， Mobi.css 也是一个不错的选择。

重新造一个轮子的意义：

1. 学习知识，分享知识。我在做的过程中把其他库源码基本上都看了一遍，也查阅了很多资料。相信这个借鉴了很多库的 Mobi.css 可以给一些人也带来帮助，即使不用它而只看它源码。
2. 输出自己的设计观念，希望 mobile 上能够有更好的作品出现（一些站点对 mobile 上的设计非常匮乏）。
3. 获得 star ，使自己的 GitHub Profile 更好看哈哈 https://github.com/xcatliu 欢迎 Follow

[iamjs]

很不错~~

[xcatliu]

@maomaomao001 @guyskk @BOYPT col-half 已改为 col-1-2 其他的也改过来了，详见 append

[hjse7en]

@xcatliu 还是留点边距好点

[shisaq]

赞赞赞，轮子造得棒！记得更新 readme ，也添加一些兼容性的说明

[726332269]

@xcatliu 你的那只猫在手机上看起来很大，让上面的文字都没法看了，不是做的自适应吗？

[kn007]

非常漂亮

[xcatliu]

@maomaomao001 @bertonzh @yoa1q7y @newbieo0O
现在没有 Macbook 可供调试，等我找台 Macbook 再修复 radio 和 checkbox 的问题。

[xcatliu]

@bertonzh Autoprefixer 已加

[xcatliu]

@kn007 @shisaq 多谢支持！嗯，稍后更新 readme 。兼容性说明等我测试完所有设备再加。

[xcatliu]

@726332269 应该做的是自适应，请问你是什么设备看的？

[726332269]

@xcatliu 小米 5 ， uc 浏览器

[xcatliu]

@hjse7en 感谢建议！不过 bootstrap v4 和 purecss 都是没有边距的， Skeleton 在手机上样式很糟糕。
我个人也觉得不要边距比好合适。不过 Mobi.css 很容易 build 一份自己的。只需要改一下 src/_variables.scss 里面的参数即可。如果有人需要有边距的可以自己 build 一份。

http://v4-alpha.getbootstrap.com/getting-started/introduction/
http://purecss.io/base/
http://getskeleton.com/