What are the nine basic principles of responsive website construction design?

Responsive Website construction design It solves the problem of various types of screens well, but from the perspective of printing, it has many difficulties. There is no fixed page size, no millimeters or inches, no physical restrictions, which makes people feel helpless. With more and more gadgets available to build websites, pixel design is limited to desktop and mobile. So now let's explain how to use the basic principles of responsive web design instead of resisting the smooth web experience. For the sake of simplicity, we will focus on the layout. 　　

　　 1. Responsive design and adaptive design 　

It looks the same, but it is not. The two design methods complement each other, and there is no right or wrong. The specific situation depends on the content. 　　

　　 2. Content stream 　　

As the screen size becomes smaller and smaller, the content occupies more and more vertical space, that is, the content will extend downward, which is called content flow. If you are used to designing with pixels and dots, you may find this a bit difficult to master. But it doesn't matter. It's easy to understand after getting used to it.

　　 3. Relative unit 　　

Your design object can be a desktop, a mobile screen, or any screen type in between. Pixels per inch will also be different from each other, so we need to use flexible units that can adapt to various situations. In this case, relative units such as percentage will come into use. When using percentage, we say that 50% of the width means that the width accounts for half of the screen size (or viewport, that is, the size of the open browser window). 　　

　　 4. Breakpoint 　

Breakpoints can deform the page layout at preset points, that is, the desktop displays three columns and the mobile device displays only one column. Most CSS properties can implement deformation between breakpoints. Where breakpoints are placed usually depends on the content. For example, if a sentence needs to wrap, you may need to add a breakpoint. However, breakpoints need to be used carefully - if the logical relationship between the contents is unclear, it is easy to confuse them. 　　

　 5. Maximum and minimum values 　　

Sometimes it is a good thing that content occupies the entire screen width (for example, on mobile devices), but it is unreasonable if the same content also occupies the TV screen. This is why there should be a maximum/minimum value. For example, if the width is 100% and the maximum width is 1000px, the content will fill the screen with a width of no more than 1000px. 　　

　　 6. Nested objects 　　

Remember the relative position? If many elements are closely related, it is difficult to control them. Therefore, placing elements in containers makes them easier to understand and concise. In this case, static units such as pixels are required. Static units are very useful for things that do not need to be extended, such as logos and buttons. 　　

　　 7. Mobile or desktop first 　　

Strictly speaking, there is little difference between small screen to large screen (mobile first) or large screen to small screen (desktop first). But holding hands from the mobile end can bring you some additional restrictions to help you make decisions. Usually people will start from two aspects at the same time, so you still need to see which one is most suitable for you. 　　

　　 8. Network font and system font 　　

Want your website to have a cool future or Didote effect? Let's use network fonts. Although web fonts look cool, remember that all these fonts need to be downloaded by users. The more words, the longer it takes the user to load the page. On the other hand, the loading speed of system fonts is much faster (provided that users have local fonts), but it is too common. 　　

　　 9. Bitmap and vector diagram 　

Does your icon have many details and gorgeous effects? If so, use a bitmap. If not, consider using vector graphics. If it is a bitmap, use jpg, png or gif. SVG or icon font is preferred for vector graphics. Each has its advantages and disadvantages. But you should always keep in mind the size of the icon - unoptimized images cannot be uploaded to the Internet. On the other hand, vector graphics are usually small, but some older browsers may not support vector graphics. In addition, if the icon has many curves, it may be larger than the bitmap, so choose wisely.