The first chapter of the media Quer of responsive design

The book talks about trying not to use media queriy. But using media query too much can cause the CSS to become brittle and the page difficult to maintain. Some ways to reduce the page use media query.

Responsive design:

(1) Replace the fixed width with a percentage. If not, use VW, VH, Vmin, Vmax as much as possible.

(2) Use the max-width without using width.

(3) for some elements, such as IMG, object, video, iframe, use max-width:100%.

(4) If the background picture is to completely cover the container, you can use background-size:cover.

(5) When you want to lay out pictures or other elements in the rows and columns of a table, you can use the Flexbox layout or the display:inline-block.

(6) When using multi-column text, replace Column-count with Column-width

Summary: use flow layout and relative size as much as possible.

(More on Flexbox layout, and CSS3 properties)

The first chapter of the media Quer of responsive design