实现一个简单的栅格系统

Posted 2023-02-26 ReedSun

实现一个简单的栅格系统

关于栅格系统

相信大家都用过 Bootstrap （神马！你没用过？这么流行你还不快去试试），栅格系统就是 Bootstrap 的核心，现在许多 UI 库中也增加了对栅格系统的支持。

栅格系统是通过对元素增加各种不同的类名从而在不同的屏幕宽度下实现不同的效果，从而实现响应式的功能。

前言

今天，我自己模仿实现了一个简单的栅格系统，戳这里看效果，看起来栅格系统很高大上，其实栅格系统的实现很简单，主要用到的还是浮动。这篇文章就是打算记录一下我是如果实现一个简单的栅格系统的。

开始

实现栅格系统，首要要确定两个内容。

• 我们打算将屏幕分为几类，每一类的类前缀是什么。

• 我们打算支持的列数是多少。

这里我选择与 bootstrap 相同， 即将屏幕分为四类：超小屏幕 手机 (<768px) 、小屏幕 平板 (≥768px) 、 中等屏幕 桌面显示器 (≥992px) 、 大屏幕 大屏幕显示器 (≥1200px) ，类前缀分别为：.col-xs- 、 .col-sm- 、 .col-md- 、 .col-lg- 。列数 12。

实现

确定了我们的屏幕分类和列数之后，我们就可以开始实现了。首先我们给所有栅格系统的 class 增加浮动

.col-sm-1, .col-sm-2, ... , .col-lg-12 
    float: left;

声明了浮动，接下来我们来声明宽度。我们从最小屏幕开始，最小屏幕不需要使用 @media来声明， 即如果我们只声明了最小宽度时他的类名，其元素将在所有情况下生效。

.col-sm-1 
    width: 8.333333%  // 十二分之一

.col-sm-2 
    width: 16.66667%  // 十二分之二      

// ...
.col-sm-12 
    width: 100%  // 十二分之十二

这样最小宽度的情况我们就写好了。接下来我们来写其他情况

其他情况也需要声明浮动和宽度，但是需要声明最小屏幕宽度，我们以中等屏幕宽度举例，中等屏幕宽度即为屏幕大于992px的情况：

@media (min-width:992) 
    .col-md-1 
        width: 8.333333%  // 十二分之一
    
    .col-md-2 
        width: 16.66667%  // 十二分之二      
    
    // ...
    .col-md-12 
        width: 100%  // 十二分之十二
    

其他情况同理，这样我们就能实现一个简单的栅格系统很啦。

疑问

很多小伙伴肯定会想，我们只声明了最小宽度，却没有声明最大宽度，这里是不是有问题呀。

其实不是的。这里的想法是这样的，比如我们这里写了中等屏幕宽度和超小屏幕宽度两种情况的 class ，那在超小屏幕上和小屏幕上都会按超小屏幕声明的宽度来执行。而在中等屏幕宽度和大屏幕上，中等屏幕宽度的声明会覆盖超小屏幕的声明，则会按中等屏幕声明来执行。

好高明啊哈哈哈~

最后

虽然现在的 UI 库大都会封装这些功能，但是自己实现一个了解一下原理对我们也是大有碑益的，至少~不会让我们变成一个“胶水程序员”。