Mobi.css —— 轻量灵活的 CSS 框架，对于这样的一个css框架我们该如何了解呢，它又是如何诞生的呢，今天IT培训网小编就来给大家详细介绍下吧！

为什么要创造 Mobi.css

当我在设计一个新的 Focus on 移动端用户的网站（比如面向微信用户的网站）的时候，调研了一些现有的 CSS 框架，应用比较广泛的有 Bootstrap, Foundation, Pure.css, Framework7, Skeleton 等。

他们都很优秀，但是都有一些缺点。

Bootstrap: 太大太笨重了，对于桌面端用户我希望展示与手机端一样的页面，可能再加上一个二维码，将用户导向微信（类似于微信公众号的文章在网页中的样式）

Foundation: 没有实践过，看上去也很大，大部分都是我不需要的功能

Skeleton: 在移动端有一些 bug ，overflow:auto; 的滑动不平滑，<select> 样式太丑，官网的 <pre><code> 在 iPhone 里根本不 work ，说明他们没有在手机上测试过

Framework7: 适合做 WebApp ，而我不太喜欢那种仿原生 App 的设计

Pure.css: 很优秀，足够小巧，没什么特别的缺点，如果定制一下应该也可以满足需求。不过我还希望框架层面能够有一些针对移动端的设计

于是我决定自己造一个轮子。

造新轮子之前一定要做好调研，否则可能白费了功夫。

第二：轻量灵活的CSS框架 mobi.css

Mobi.css 是一个专用于手机的轻量灵活的 CSS 框架。

介绍

1. 压缩后只有3.6kb，低于Skeleton, Pure.css , Bootstrap v4等。

2. 大量使用 flexbox，非常灵活，主页自定义样式少于10行。

3. 专用于手机，桌面显示手机界面，侧边栏显示向左或向右滑动键。

入门

您可在此界面下载该应用，可通过dist/mobi.min.css压缩文件。

可通过npm安装：

         npm install --save mobi.css

如果您使用的是sass，可建立mobi.css到您的设备：

         @import 'mobi.css/src/mobi';

请确定node-modules已经添加至 load_paths 。

浏览器支持：

1. 通过  Autoprefixer 确认mobi.css是否适用所有手机。

2. 从 Browserslist查询浏览器。

3. 浏览器标记（*）为没有测试好，但能够正常工作。

以上就是关于css框架mobi.css的诞生与使用的方法，希望大家可以用心学习，毕竟知识无穷尽，多学点总归是好的，如果想要学习更高深的知识，请关注IT培训网！