「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

[Martox]

先赞后看

[haiyang416]

大致看了下，还不错，支持。

[maomaomao001]

建议
1: 做好 select 和 checkbox 的样式
2: 布局里的 1/2 啊，四分之之类的请用数字代替(50,25)
或者 1-2,1-4 这样的

[teriyaki888]

支持

真心不喜欢那些大坨 js 框架

[hanxiV2EX]

支持，已 star

[xcatliu]

@maomaomao001 感谢你的建议！

第一条建议能描述具体一点吗？我是故意保留了 checkbox 和 radio 的原始样子，觉得手机中的样式挺好的。你的意思是要修改他们的样式吗？还是说在一些手机上有 bug ？

第二条建议，我思考了一下，觉得确实不是很方便， quarter 不是很好拼。决定下个版本中改为 col-1-2 col-1-3 col-1-4

另外 section paragraph clear-margin-top 也想改成更好记的 mt-30 mt-15 mt-0

我记录在 issues 里面了，今天有时间的时候再改

[Troevil]

问题来了 大量使用 Flexbox , 兼容性怎么保证呢

[RoshanWu]

@Troevil 确实，已被 Android 4.3 以下的折腾死。。。

[xcatliu]

@Troevil 根据 caniuse

caniuse.com/#feat=flexbox

绝大部分手机浏览器是支持 flexbox 的，相信已经基本上可以安全使用了。

[xcatliu]

@Troevil @RoshanWu Android 4.3 以下确实还有问题。。。只能等它绝迹了

[RoshanWu]

@xcatliu 呵呵，不管怎么样，还是送上 star 表示兹瓷

[xcatliu]

@RoshanWu 感谢支持！

[guyskk]

@xcatliu col-6 col-4 col-3 不是更好吗，分母固定 12

[hansnow]

已 star 支持

[panlilu]

兹瓷

[0915240]

支持支持

[0915240]

已 star

[BOYPT]

嗯…… flexbox 的 grid ……感觉像轻量的 boostrap 4 ……不过觉得固定比例分配还是得要有……

[xcatliu]

@guyskk 谢谢建议。不过我觉得移动端不需要 12 格的 grid ，所以没有用 12 格的概念

[xcatliu]

@BOYPT 谢谢建议。固定比例分配是什么意思？现在应该是固定比例的分配