HTML-Responsive Layout principles

Responsive web Design is a great solution for multi-screen problems, but it's a bit difficult from a printing point of view. No fixed page size, no millimeters or inches, no physical limitations, no limit. The method of using pixel design alone for desktop and mobile has also become the past, as more and more devices can open websites. Therefore, we need to understand some of the basic principles of responsive web design, to accept the fluid Web page, rather than against it. To keep it simple, we'll look at the layout (yes, the response is more complex than it is, and if you want to learn more, it's a good start.) ） Responsive vs self-adapting web design They seem to be the same, but that is not the case. These two methods complement each other, and do not say which is the right one is wrong and the content determines everything. Content Flow as the screen size becomes smaller, the content will occupy more vertical space, and the content below will be pushed down, which is called flow. This can be tricky if you're designing with pixels and pounds, but when you get used to it, it makes sense. Relative units The canvas size can be either desktop, mobile, or any size between them. Pixel density can also vary, so we need a flexible unit that can be used on various screens. This is the time when relative units (such as percentages) come in handy. So setting the width of 50% also means that it occupies half of the screen (or view, which is the size of the Open browser window). Breakpoint breakpoints allow the layout to change at a predefined point. For example: There are 3 columns on the desktop screen, but only one column on mobile. Most CSS properties can be changed depending on the breakpoint. Usually you set breakpoints based on specific content. If a sentence exceeds the screen length, you may need to add a breakpoint to it. But using breakpoints is a caution-it can quickly lead to confusion when it is difficult to understand what content will affect what content. Maximum value and minimum value Sometimes, if the content occupies the entire width of the screen is good, such as on the mobile device. But if it's on a TV screen, the same content, which occupies the entire width of your screen, is usually a little meaningless. This is the time for the Min/max value to work. For example, if you set width to 100% and then Max-width is 1000px, the content fills the screen, but not more than 1000px. Nested objects Do you remember the relative position? It is difficult to control the position of many elements depending on other elements, so using containers to wrap elements can make it easier to understand and tidy. This is the time when a static unit (such as a pixel) works. They are useful for content that you do not want to modularize (such as logos or buttons). Mobile first or Desktop first Technically, if a project starts from a smaller screen and becomes a larger screen (mobile first), or vice versa (desktop first), there is not much difference. However, it adds additional restrictions that can help you decide whether to start with mobile first. People usually write at the end of each other at the beginning, so it's better to see which one is going to work. Web Fonts vs System fonts want to have cool Futura or Didot fonts on your website? You can use Web fonts! Although they look great, remember that the more fonts you put in, the longer you'll be loading the page. On the other hand, loading a system font is fast as lightning, but when the user does not have this set of fonts locally, it returns the default font. Bitmap vs Vector graph Have you ever thought of adding a lot of detail and fancy effects to the icons? If you think about it, it's better to use a bitmap. If not, you might consider using a vector diagram. For bitmaps, images in jpg, PNG, or GIF format are used, and for vectors, the best choice is SVG or icon font. Each has a corresponding advantage and disadvantage. But the size of the picture also needs to be taken seriously-the picture on the page must be optimized. On the other hand, vectors are usually small, but some older browsers do not support them. In addition, if it has a lot of curves, it may also be heavier than the bitmap. So, choose carefully.

HTML-Responsive Layout principles