9 Basic principles of responsive web design

Responsive web Design is a good solution for solving multi-type screen problems, but from a printing point of view, there are a lot of difficulties. There is no fixed page size, no millimeters or inches, no physical restrictions, and it doesn't make sense. With the growing number of gadgets available on the site, the pixel design bureau to desktop and mobile has become history. So let's now explain how to use the Basic principles of responsive web design rather than resisting a smooth web experience. For the sake of simplicity, we will focus on layout.
Responsive design vs Adaptive design
It looks the same. These two designs complement each other, so there is no right or wrong point. The specific situation depends on the content.
Content Flow
As the size of the screen becomes smaller and larger, the content occupies more vertical space, meaning that the content is stretched downward, which is called content flow. If you're used to designing with pixels and dots, you might find this a bit difficult to master. But it doesn't matter, getting used to it is a good idea.
Relative units
Your design object might be a desktop desktop, or it could be a mobile screen or any screen type in between. Pixel densities also differ from one another, so we need to use units that are flexible and adaptable to a variety of situations. In this case, the relative units such as percentages will be useful. When using percentages, we say that width 50% means half the width of the screen (or the viewport, that is, the size of the Open browser window).
Breakpoint
Breakpoints allow the page layout to deform at a preset point, that is, 3 columns are displayed on the desktop, and only 1 columns are displayed on the mobile device. Most CSS properties allow you to deform between breakpoints. The location where the breakpoint is placed usually depends on the content. For example, if you want to wrap a sentence, you may need to add a breakpoint. But use caution when using breakpoints--it's easy to mess up if you can't figure out the logical relationship between the content.
Maximum and minimum values
Sometimes it's good to fill up the entire screen width (for example, on a mobile device), but if the same content is full on the TV screen, it doesn't seem reasonable. This is why there is a maximum/minimum value. For example, if the width is 100% and the maximum width is 1000px, the content fills the screen at a width of no more than 1000px.
Nested objects
Do you remember the relative position? If a large pile of elements are closely linked to each other, then it will be difficult to control. Therefore, placing features in a container makes them better understood and concise. In this case, a static unit such as pixels is needed. Static units are useful for content that does not need to be expanded, such as logos and buttons.
Mobile first or Desktop desktop preferred
Strictly speaking, the transition from a small screen to a big screen (mobile first) or from a big screen to a small screen (desktop desktop first) is not very different. However, starting from the mobile side can bring you some additional restrictions to help you make decisions. Usually you will start at the same time in two ways, so you have to see which way is best for you.
Web Fonts vs System fonts
Want to have a cool Futura or Didot effect on your website? That's using Web fonts. Although Web fonts look cool, you have to remember that these fonts require users to download, the more words, the longer the user loads the page. On the other hand, the system font loading speed is much faster (if the user has this machine), but too common.
Bitmap vs Vector graph
Does your icon have a lot of detail and has a lot of gorgeous effects applied to it? If so, use a bitmap. If not, consider using a vector diagram. If it is a bitmap, use JPG, PNG, or GIF. Vector charts are best used with SVG or icon fonts. Each has its own pros and cons. But you always have to remember the icon size--images that have not been optimized are not uploaded online. Vectors, on the other hand, are usually small, but some older browsers may not support vector images. Also, if the icon has a lot of curves, it may be larger than the bitmap, so make a wise choice.

