Mobi.css v3 发布了，一个轻量、可拓展、移动端优先的 CSS 框架
xcatliu · xcatliu · 2017-09-04 02:00:56 +08:00 · 5633 次点击这是一个创建于 2642 天前的主题，其中的信息可能已经有所发展或是发生改变。
简单介绍
- 轻量级：压缩 gzip 后只有 2.6 kb
- 可拓展：可以引入 plugin 来拓展 Mobi.css ，并且每个 plugin 都可以独立于框架使用
- 移动端优先：为移动端设计，在桌面端也表现良好
前贴： https://www.v2ex.com/t/302356
Q&A
Mobi.css 有哪些其他框架没有的特性呢？
- flexbox 很好用 http://getmobicss.com/docs/flexbox.html
- 每个 plugin 可以独立使用，即使你不想用 Mobi.css ，也可以只用其中一个 plugin
- 认为只使用 margin-top 分隔块比较好，所以几乎所有 margin-bottom 都为 0
为什么从 v1 直接跳到 v3 了？
因为开发了 v2 一段时间之后，遇到一些问题，过了一段时间才找到解决方案，此时以及离 v2 beta 版相差有点远了，所以就直接跳到了 v3
有 qq 群或微信群讨论吗？
有，qq 群 378244667 微信请加我 xcatliu，注明姓名和来自 v2ex，我拉你进群
其他问题可以在下面留言 😆
 |
1
ericls 2017-09-04 02:57:27 +08:00  1
非常好！
|
 |
2
vacker 2017-09-04 04:15:53 +08:00 via Android 1
支持下
|
 |
5
hteen 2017-09-04 08:14:47 +08:00 via iPhone 1
一直等 2 的我有点懵逼了😅
|
 |
6
xcatliu OP @hteen 其实和 2 区别不大哈，只是用了 lerna 管理多模块，构建改成了 postcss 加 nextcss，使用了 rem 做长度单位
|
 |
8
kitty7030 2017-09-04 08:37:40 +08:00 1
真小
|
 |
9
akaayy 2017-09-04 09:10:15 +08:00 via Android 1
真短
|
 |
10
jjplay 2017-09-04 10:09:44 +08:00 1
真快
|
 |
11
designer 2017-09-04 10:10:02 +08:00 via iPhone 1
支持！
|
 |
12
ChiangDi 2017-09-04 10:15:52 +08:00 1
大佬，Follow the rule of margin-top-only 是什么意思呢
|
 |
13
Hilong 2017-09-04 10:30:55 +08:00 via Android 1
看到你这个帖子才发现已经过去一年了，去年第一版出来我就用上了，引入进来就为了用 flexbox，后面那个项目做完了。就没再关注了，没想到作者还在更新，支持一下，后面在自己的个人项目里再引入进来看看
|
 |
14
chuanqirenwu 2017-09-04 10:38:58 +08:00 1
|
|
16
xcatliu OP |
 |
17
windfarer 2017-09-04 12:45:58 +08:00 via Android 1
资磁一下
|
 |
18
joyqi 2017-09-04 12:47:17 +08:00 1
搞 mobi。。。
|
|
19
xcatliu OP @Hilong 感谢支持呀，现在如果只想用 flexbox，可以只引入这个 plugin 就行啦。
https://github.com/mobi-css/mobi.css/tree/master/packages/mobi-plugin-flexbox/dist |
|
20
xcatliu OP @ChiangDi 改成了
Only use margin-top to set gaps between block elements |
|
24
chuanqirenwu 2017-09-04 17:22:23 +08:00 via iPad 1
@xcatliu 说错了，是这个页面里的文档里的链接失效了。
|
|
26
xcatliu OP @ChiangDi 因为我觉得应该由每个元素自己决定它应该距离上面的元素多远
This technique allows each section to determine the spacing it needs from the element above it. |
|
27
chuanqirenwu 2017-09-04 18:32:34 +08:00 1
@xcatliu 关于 margin top 的理念，bootstap 则认为 margin top 会导致一些布局问题，因此 bootsrtap 中所有元素都只设置 margin bottom，top 都被重置为 0。
我在实际使用中也发现，margin top 有时会不方便，尤其是在已经设置了 padding 的容器里，必须再把第一个元素的 margin top 设为 0。 |
|
28
xcatliu OP @chuanqirenwu 当时我开发的时候看到过 Bootstrap 对 margin top or bottom 的讨论：
https://github.com/twbs/bootstrap/issues/18958 我更认同 margin-top 的理念。 1. h1 ~ h6 与上个段落之间应该有一个较大的空隙，并且 h2 的空隙应该比 h3 大。如果只设置 margin-bottom 无法实现。在那个 issue 中他也没解释清楚怎么解决这个问题。看 bootstrap 的官网，他是用另外的 css 实现了 h1, h2, h3 的不同 margin-top https://getbootstrap.com/docs/4.0/getting-started/introduction/ 2. Bootstrap 认为 margin top 的布局问题是指，如果在一个 box 中使用 h2，并且我们选择只设置 margin-top，那么这时就得写额外的代码去掉 margin-top 了。但其实这个问题很好解决，在框架层面的 box 里设置第一个元素的 margin-top 为 0 即可。 3. 也可以使用 util 覆盖 margin-top 和 margin-bottom，很方便 |
|
29
chuanqirenwu 2017-09-04 21:35:46 +08:00
@xcatliu 嗯嗯，看来也很有道理。感谢 mobi.css
|
 |
30
ctt 2017-09-04 22:17:49 +08:00
收藏！
|
|
31
ctt 2017-09-04 22:36:03 +08:00 1
真心不错，简单易用，不会琢磨 css 的终于能把自己的简陋网页改进下了！感谢！
|
 |
33
flowfire 2017-09-05 00:41:23 +08:00 via Android 1
logo 有点丑…………那个 m 中间尖尖的怪怪的
|
 |
35
givebest 2017-09-05 10:06:12 +08:00
棒
|
 |
36
dyxang 2017-09-07 22:47:03 +08:00 via Android 1
虽然我的关注点不对，但是我还是要问一句，为什么没有中文？
学生党伤不起啊，英语不好 |
 |
38
lieqishi 2017-09-08 10:07:16 +08:00 1
刚看了，但是还不太明白~主要适合什么场景呢？有什么特别明显的特点吗？
|
|
39
xcatliu OP 适合什么场景：移动端，重内容。
有什么明显的特点： 1. flexbox 很好用 http://getmobicss.com/docs/flexbox.html 2. 每个 plugin 可以独立使用，即使你不想用 Mobi.css ，也可以只用其中一个 plugin 3. 认为只使用 margin-top 分隔块比较好，所以几乎所有 margin-bottom 都为 0 |
|
40
xcatliu OP @lieqishi 适合什么场景：移动端，重内容。
有什么明显的特点： 1. flexbox 很好用 2. 每个 plugin 可以独立使用，即使你不想用 Mobi.css ，也可以只用其中一个 plugin 3. 认为只使用 margin-top 分隔块比较好，所以几乎所有 margin-bottom 都为 0 |
 |
41
hasbug 2017-09-26 08:54:43 +08:00
国人的吗？ 怎么都纯英文文档。。。
|
 |
43
fzmsss 2017-09-27 11:06:23 +08:00
猫 想知道 pc 浏览器的兼容性 主要 ie10 以上
|
Select Language