Streamlined layout of mobile development
Everyone who is learning the front-end, I believe that everyone has used the percentage layout when writing the front-end page, which is what we call the streaming layout today. Then I will summarize the use of the streaming layout.
One: What is a streaming layout?
The page layout includes:
- Static layout
- Flow layout
- Flexible layout
- Responsive layout
- ……
Static layout
- Static layout means that all elements in the web page use px as the unit. Regardless of the specific size of the browser, it is always displayed according to the set value layout. Due to the different sizes of browsers, such a layout is easy to be in different devices There are problems such as scroll bars. So this layout is not the mainstream layout in mobile development.
Flow layout
- Streaming layout means that the width of the elements in the page is automatically adjusted according to the screen resolution, which is what we often call adaptation. It can ensure that when the current screen resolution changes, the size of the elements in the page can also be changed. Therefore, the streaming layout is a layout commonly used in mobile development.
We will explain other layout methods in the following blogs one after another, I hope everyone will pay more attention!.
Two: Under what circumstances will streaming layout be used?
1. When opening our mobile page, I found that no matter what kind of mobile device, the page is always full screen as shown below:
Figure 1: The effect of Jingdong page in iphone6 and 7pluse:
Figure 2: The effect of the Jingdong page in iphone4:
In this case in mobile development, the flow layout is implemented. The specific implementation is as follows: First, add a meta tag to the head tag of the web page to set the viewport
Then set the width of the parent element in the page to 100% to achieve
2. The navigation items in the mobile terminal should be divided into equal parts of the parent container. For example, in the Ctrip mobile webpage, navigation is divided into 5 parts in iphone4, and 5 parts in iphoneX, as shown below:
Figure 1: It is the effect of 5 equal division in iphone4
Figure 2: The effect of 5 equal divisions in ipnoneX
In the case of this kind of equal division in mobile development, it is also necessary to use the flow layout implementation, with 5 equal divisions for example, the specific code is as follows:
Maybe some friends also thought about how to divide into other equal parts? Our approach is to divide 100% by the corresponding number of shares. If you want to divide into 3 equal parts, divide 100 by 3. If you want to divide For 4 equal parts, divide 100 by 4.
3. If there are fixed sizes on the left and right sides in the web page layout, and the middle adaptive (Holy Grail layout, double flying wing layout), this longitude layout also needs to be implemented with a fluid layout, as follows:
The specific implementation is as follows: Prepare 3 boxes in the HTML structure
Then set the corresponding CSS code:
There are other situations in the flow layout, such as fixed size on the left and adaptive on the right. The remaining two situations are fixed on the right and adaptive on the left. You can refer to the above holy grail layout for flexible implementation, here is not Demonstrated to everyone.
Three: Are there any shortcomings in the flow layout?
- Streaming layout is used to solve the compatibility between different resolutions of similar devices. If the screen scale span is too large, it will not be displayed normally on a screen that is too small or too large compared to its original design.
- Because the width is defined by %, but the height and text size are mostly fixed with px, so the display effect will become that the width of some page elements is stretched very long under the mobile phone with large screen, but the height and text size are still the same as the original The same (ie, these things cannot become "streaming"), the display is very uncoordinated.