current Responsive design Four types of dimensions are generally considered (width and height are generally calculated according to the ratio of 9:16, and the height of the navigation bar above and below the browser is subtracted):
- Tablet: 361 - 1024 px
- Mainstream PC display: 1025 - 1920 px (1080P is the mainstream desktop display at present)
- Ultra clear PC display: 1921 - 5120 px (2K, 4K, 5K and other ultra-high resolutions are mainly considered for the future)
1. Mobile phone
The correct process of responsive design should be mobile first, and then gradually enlarge to a larger size. Therefore, the design of the mobile phone should be given priority, rather than trying to compress it to the mobile phone after designing the traditional desktop website. As for how to design the mobile Web interface, I will not elaborate here. I believe that all designers have their own ideas.
The flat end is basically the mobile end of the enlarged version, which can directly copy 75% of the work, but the single element will appear too large if directly copied. After all, the page resolution is almost three times that of the previous version. Therefore, the layout of the tablet side can be divided into several more columns than that of the mobile phone side. For example, the design of a ListView on the mobile phone side can be divided into 2 to 3 columns on the tablet side. The buttons with full screen width on the mobile phone side will appear too long on the tablet side. You can consider shortening them appropriately and reserve enough height for hand pointing and pressing. The navigation The menu can be displayed directly to fill the extra space.
There is nothing to say about this. We must have been familiar with traditional Web design for a long time. The only thing we should pay attention to here is to maintain the consistency of the layout. The PC end of the responsive design is magnified and adapted from the panel end, which can display more content, but it should not be too different from the flat end. It should ensure that users can identify the same website.
4. Ultra clear PC display
This did not need to be considered in the past. At that time, 1080P was still a hot concept, and 1024px was still the resolution of notebook. But now, with the gradual popularity of 2K/4K screens, the proportion of these users is gradually increasing, and the problem is becoming increasingly prominent and can not be ignored. Web pages without special adaptation schemes will appear to have two changes in these environments: the pages originally adapted to the full screen will be stretched too wide, and large gaps will be left on both sides of the pages originally fixed in width. Faced with this fact, designers need to consider the appearance of the page on these devices when designing the adaptation scheme.
