Example code of CSS responsive layout system

Time:2020-1-14

Reactive layout system is very common in the current popular CSS framework. It is mainly composed of container class and grid system with a number of rows and columns.

In the popular front-end frameworks bootstrap and bulma CSS, it is reflected. For example. Container,. Row,. Col for bootstrap, and. Container, columns, and column for bulma CSS all represent such layout systems. Although the names are different, the principles are the same.

With the popularity of flex layout, almost modern grid systems choose to use this flexible layout.

Now let’s see how to implement a minimal CSS responsive layout system.

Start with the container.

In order to ensure the simplicity of the implementation code, this article will use SCSS to write. If you are not familiar with SCSS, it doesn’t matter. The article will introduce the knowledge points used.

container

Containers are mainly used to wrap the main content of web pages. The common effect is to display the content in the middle of the screen.

We use. Container to contract containers.

First, the container is horizontally centered, which is easier:


.container {
    margin-left: auto;
    margin-right: auto;
}

The so-called responsive container determines the max width value used by the container according to different breakpoints, that is, the current viewport width.

Here we use the definition of breakpoint in bootstrap for reference. According to the width of the viewport, it is divided into the following types of devices:
 


[0, 576px)
[576px, 768px)
[768px, 992px)
[992px, 1200px)
[1200px, +∞)

For the breakpoint definition, declare a variable $breakpoints:


$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);

$breakpoints is called a “list” and is the data structure provided to us by SCSS. It consists of key: value key value pairs. The key in the above example represents the starting point of the valid range of the device.

Containers have different max width values for different devices. So, here we declare a variable $container max width that represents the container width:
 


$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);

The $container max width here is also a list. The key here represents the maximum width of the container under a device. For example, in a large screen device, the maximum width of the container is 1140px, while in a normal mobile phone, the maximum width of the container is not set, which is the default value of none.

With the idea of realization, we will start to realize it next.

We can use the media query instruction @ media to give different max width values to. Container according to the range of viewport width.


@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}

7 lines of code!

The code above is explained below.

We use @ each… In syntax to traverse the list. Each time we traverse the list, we get the corresponding key and value and get the current $device and $breakpoint. Map get is the method provided by SCSS to operate the list: take value according to the key. For example, when $device value is XS, map get ($container max width, $device) corresponds to none; when $device value is SM, map get ($container max width, $device) corresponds to 540px, and so on.

@media only screen and (min-width: $breakpoint) { ... } The code contained in represents the CSS style applied from the beginning of the current device breakpoint. When we set the media query with two breakpoints from small to large at the same time, the latter will overwrite the former style, which is the core principle of realizing containers with different width in different viewport.

Next, assign the resulting width value to the max width attribute of the container.

So far, we’ve written a responsive container, and we’ve covered the following code:


$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);
$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);
.container {
    margin-left: auto;
    margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}

Click here to see the effect.

Let’s look at the 12 column grid layout.

12 column grid layout

First, use flex layout to write the simplest equal width layout.


.row {
    display: flex;
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
    }
}

Yes, that’s all the code to use flex layout to implement an equal width layout. If you don’t consider the blank lines in the middle, you only need 7 lines of code.

The principle here is that we have set the flex basis of all flex projects to 0, which means that these flex projects have no width and are the same length before grow or shrink. In this way, the final calculated spindle space is evenly allocated to each flex project, so that they are equally wide.

The simple grid layout we have written here has two limitations:

1. Cannot layout non equal width items.
2. Line wrapping is not supported.

It’s very easy to wrap. Just add a flex Wrap: wrap to the flex container. How to deal with the arrangement of “unequal width items”.

In order to realize the layout of non equal width projects, our idea is to disable the flex project’s scaling feature and use the percentage width to specify the width.

First, disable the flex project’s scaling feature, using the following properties:


flex-shrink: 0;
flex-grow: 0;
flex-basis: 0;

These three attributes are equivalent to each other

flex: none;

Then you use the percentage width to specify the width.

We implement a grid layout with a row of up to 12 columns. That is to say, divide a row into 12 columns, and the width of each column accounts for about 8.33% of the total width. We use the. Is column number to specify the number of columns occupied by an item:

.is-1
.is-2
.is-3
.is-4
.is-5
.is-6
.is-7
.is-8
.is-9
.is-10
.is-11
.is-12

According to this rule, we can easily write grid layout code:


$columns: 12;

.row {
    display: flex;
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
        
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
        }
    }
}

Here we use the @ for command @for $var from <start> through <end>Syntax, increasing from 1 to 12, defines the. Is – * series of class names. The principle is that we have disabled the flex project’s scaling feature and assigned it a percentage width. Well, it’s very simple.

Then add the line break(.row.is-multiline )Offset from flex project( .is-offset-* )Support for.

We have the following codes:


$columns: 12;

.row {
    display: flex;
    
    &.is-multiline {
        flex-wrap: wrap;   
    }
    
    .col {
        flex-grow: 1;
        flex-basis: 0;
        
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
            &.is-offset-#{$i} {
                margin-left: percentage($i / 12);
            }
        }
    }
}

. is multiline is used with. Row to get the effect of flex Wrap: wrap; project offset is achieved with margin left
Property implementation.

So far, we have finished the layout of 12 columns grid

Complete code

When we integrate the above two parts of the code, we can get a minimum responsive layout system ~ o (∩∩∩∩∩∩∩∩∩∩∩∩∩∩) o

 


$breakpoints: (
    // Extra small screen / phone
    xs: 0,
    // Small screen / phone
    sm: 576px,
    // Medium screen / tablet
    md: 768px,
    // Large screen / desktop
    lg: 992px,
    // Extra large screen / wide desktop
    xl: 1200px
);
$container-max-widths: (
    xs: none,
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px
);
.container {
    margin-left: auto;
    margin-right: auto;
}
@each $device, $breakpoint in $breakpoints {
    @media only screen and (min-width: $breakpoint) {
        .container {
            max-width: map-get($container-max-widths, $device);
        }
    }
}
$columns: 12;
.row {
    display: flex;
    &.is-multiline {
        flex-wrap: wrap;   
    }
    .col {
        flex-grow: 1;
        flex-basis: 0;
        @for $i from 1 through 12 {
            &.is-#{$i} {
                flex: none;
                width: percentage($i / 12);
            }
            &.is-offset-#{$i} {
                margin-left: percentage($i / 12);
            }
        }
    }
}

 

You can see the effect here.

Of course, there are many other rich functions you can add. Here is just a simple code implementation.
 

summary

The above is the example code of CSS responsive layout system introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!

Recommended Today

Query SAP multiple database table sizes

Query SAP multiple database table sizes https://www.cnblogs.com/ken-yu/p/12973009.html Item code db02 Here are two approaches, In the first graphical interface, the results of the query data table are displayed in MB, and only one table can be queried at a time. SPACE—Segments—Detailed Analysis—Detailed Analysis  In the pop-up window segment / object, enter the name of the […]