Mobi.css v3 发布了，一个轻量、可拓展、移动端优先的 CSS 框架

xcatliu

2017-09-04 14:26:12 +08:00

@joyqi 千万不要用拼音去读。。

xcatliu

2017-09-04 14:26:55 +08:00

@kitty7030 @akaayy @jjplay @designer @windfarer 感谢支持！

ChiangDi

2017-09-04 16:07:08 +08:00

@xcatliu 嗯...我问得就是为什么只用 margin top...

chuanqirenwu

2017-09-04 17:22:23 +08:00

@xcatliu 说错了，是这个页面里的文档里的链接失效了。

xcatliu

2017-09-04 17:43:01 +08:00

@ChiangDi 感谢！已修复

xcatliu

2017-09-04 17:45:03 +08:00

@ChiangDi 因为我觉得应该由每个元素自己决定它应该距离上面的元素多远
This technique allows each section to determine the spacing it needs from the element above it.

chuanqirenwu

2017-09-04 18:32:34 +08:00

@xcatliu 关于 margin top 的理念，bootstap 则认为 margin top 会导致一些布局问题，因此 bootsrtap 中所有元素都只设置 margin bottom，top 都被重置为 0。

我在实际使用中也发现，margin top 有时会不方便，尤其是在已经设置了 padding 的容器里，必须再把第一个元素的 margin top 设为 0。

xcatliu

2017-09-04 19:19:20 +08:00

@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，很方便

chuanqirenwu

2017-09-04 21:35:46 +08:00

@xcatliu 嗯嗯，看来也很有道理。感谢 mobi.css

ctt

2017-09-04 22:17:49 +08:00

收藏！

ctt

2017-09-04 22:36:03 +08:00

真心不错，简单易用，不会琢磨 css 的终于能把自己的简陋网页改进下了！感谢！

xcatliu

2017-09-04 22:52:32 +08:00

@ctt 感谢支持~

flowfire

2017-09-05 00:41:23 +08:00

logo 有点丑…………那个 m 中间尖尖的怪怪的

xcatliu

2017-09-05 09:57:13 +08:00

@flowfire 设计能力堪忧 😂直接模仿的 css3 的 logo

givebest

2017-09-05 10:06:12 +08:00

棒

dyxang

2017-09-07 22:47:03 +08:00

虽然我的关注点不对，但是我还是要问一句，为什么没有中文？
学生党伤不起啊，英语不好

xcatliu

2017-09-07 23:00:42 +08:00

@dyxang 因为还没有时间写中文的文档，后面会有的😁

lieqishi

2017-09-08 10:07:16 +08:00

刚看了，但是还不太明白~主要适合什么场景呢？有什么特别明显的特点吗？

xcatliu

2017-09-08 10:36:15 +08:00

适合什么场景：移动端，重内容。
有什么明显的特点：
1. flexbox 很好用 http://getmobicss.com/docs/flexbox.html
2. 每个 plugin 可以独立使用，即使你不想用 Mobi.css ，也可以只用其中一个 plugin
3. 认为只使用 margin-top 分隔块比较好，所以几乎所有 margin-bottom 都为 0

xcatliu

2017-09-08 10:37:02 +08:00

@lieqishi 适合什么场景：移动端，重内容。
有什么明显的特点：
1. flexbox 很好用
2. 每个 plugin 可以独立使用，即使你不想用 Mobi.css ，也可以只用其中一个 plugin
3. 认为只使用 margin-top 分隔块比较好，所以几乎所有 margin-bottom 都为 0

Mobi.css v3 发布了，一个轻量、可拓展、移动端优先的 CSS 框架

简单介绍

Q&A

Mobi.css 有哪些其他框架没有的特性呢？

为什么从 v1 直接跳到 v3 了？

有 qq 群或微信群讨论吗？