Web front-end responsive grid layout

1. To do responsive, it is best not to write dead width, use % or grid layout

2. The advantage of grid layout is convenience. Take ant-design's Row/Col example, you can not only specify the number of grids occupied by different screens, but also use flex layout with type='flex', but there are drawbacks, although the response The style is easier, but 24 is still not accurate enough, 48? (In fact, to put it bluntly, he is a percentage. If you want to be more subdivided and use a percentage instead), you need to be more subdivided. Otherwise, the problem may be too large and difficult to solve.

to sum up:

1. If the grid layout can be made into a percentage form, it is perfect.

2. If you feel that it is not accurate enough, use the original % (can be used in Row and Col) and limit max-width and min-width

eg.

<Row>

    <Col className="ant-col">
    // todo

    </Col>

</Row>


.ant-col {

width: 18%;

max-width: 280px;

}

Intelligent Recommendation

Front end entry series-mobile web development responsive layout

The layouts we wrote above are all developed separately on the mobile terminal, but what if we want the same page to automatically modify the layout style when different devices are detected (when the...

Web front-end basics——Responsive layout BootStrap framework

BootStrap Grid System The so-called grid system refers toBootstrap3In the meantime, divide our web page width into 12 equal parts, and each content accounts for the corresponding number of 12 parts. ....

The front end of the Grid layout Layout -----

What is a grid: 1. The position of the fixed rail and the elastic size: You can create a grid using a fixed track sizes, such as the use of pixel units, it can also be used specifically to create such...

Simple front-end responsive layout

This method is to monitor the page size, set the page size range, load different css files Examples are as follows In the example set if the page size has a maximum width of500px Usesmallcss.cssIf the...

Front-end|Responsive layout principle

Welcome to click "The Beauty of Algorithms and Programming" ↑ Follow us! This article was first published on the WeChat public account: "The Beauty of Algorithms and Programming&qu...