Today, I will share with you the next part of the grid, "The Application of Grid in Responsive Design"
The term responsive layout is believed to be familiar to most designers, and can clearly know its basic presentation effect. However, when it Buy email list comes to specific operations and collaboration with developers, many professional terms are difficult to understand. Have you ever had the following question
The width unit is percentage or px, or rem, what is the difference between them?
Responsive and adaptive are stupidly unclear. What is the difference and connection between the two?
What is a breakpoint? What is a media query?
An overview of responsiveness
1. Historical Corridor
In the early days, when hardware devices were lagging behind, developers mainly used fixed layouts (also known as static layouts) to develop web pages. Fixed layouts set their content to a fixed pixel width (px).
Later, with the development of technology, the number of browsers increased, and developers were busy with compatibility with various browsers. Fluid layouts and flex layouts emerged, with content using percentages (%) to determine width.
In 2010, CSS3 was officially launched, and responsive layout was introduced at the same time. In 2012, media queries (also called breakpoints, this concept will be explained in detail later). Media queries can move content, change text size, hide or show content blocks, adjust margins and whitespace, and adjust other CSS styles. Because of these two things, adaptive layout and responsive layout are quickly used as more advanced layout usages after going live.
2. The difference between responsive and adaptive
Responsive and responsive layout beginners are often confused, and their principles are indeed very similar, both are detection devices. Let's take a look at their differences: