Shulou(Shulou.com)06/02 Report--

This article will explain in detail what are the nine basic principles of responsive WEB design. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Responsive Web design is a good solution to solve multi-type screen problems, but from the printing point of view, it has a lot of difficulties. There is no fixed page size, no millimeters or inches, no physical restrictions, and people feel like they don't know where to start. With more and more gadgets available to build websites, pixel design is limited to desktops and mobile devices. So now let's explain how to apply the basic principles of responsive Web design to achieve it, rather than resisting a smooth web experience. For simplicity's sake, we will focus on layout.

Responsive design vs adaptive design

It looks the same, but it's not. The two designs complement each other, so there is no difference between right and wrong. The specific situation depends on the content.

Content stream

As the screen size gets smaller and smaller, the content takes up more and more vertical space, that is, the content extends downward, which is called content flow. If you are used to using pixels and dots for design, you may find this a bit difficult to master. But it doesn't matter, it's easy to understand when you get used to it.

Relative unit

Your design object may be a desktop, a mobile screen, or any screen type in between. Pixel densities will also be different from each other, so we need to use units that are flexible and adaptable to a variety of situations. In this case, relative units such as percentages come in handy. When using a percentage, we say 50% width means that the width accounts for half of the screen size (or viewport, that is, the size of the browser window opened).

Breakpoint

Breakpoints allow the page layout to deform at preset points, that is, three columns are displayed on the desktop and only one column is displayed on the mobile device. Most CSS properties can deform between breakpoints. The location of the breakpoint usually depends on the content. For example, if you want to break a line in a sentence, you may need to add a breakpoint. But you need to be careful when using breakpoints-it's easy to make a mess if you don't understand the logical relationship between the content.

Minimum value

Sometimes it's good for content to take up the entire screen width (for example, on mobile devices), but it doesn't seem to make sense if the same content is full on the TV screen. That's why there's a minimum. For example, if the width is 100% and the width is 1000px, then the content fills the screen with a width no more than 1000px.

Nested object

Do you remember the relative position? If a large number of elements are closely related to each other, it will be difficult to control. Therefore, placing elements in a container makes them easier to understand and concise. In this case, static units such as pixels are needed. Static units are useful for things that don't need to be extended, such as logo and buttons.

Mobile priority or Desktop priority

Strictly speaking, there is little difference between a project moving from a small screen to a large screen (mobile first) or from a large screen to a small screen (desktop first). However, starting with the mobile side can give you some additional limitations to help you make decisions. Usually people start from two aspects at the same time, so you still have to see which one is best for you.

Web fonts vs system fonts

Do you want your website to have cool Futura or Didot effects? That is to use the web font. Although web fonts look cool, keep in mind that these fonts need to be downloaded by users, and the more words they have, the longer it will take them to load the page. On the other hand, the system font loading speed is much faster (provided the user has it locally), but it is too ordinary.

Bitmap vs vector map

Does your icon have a lot of details and apply a lot of gorgeous effects? If so, use a bitmap. If not, consider using a vector graph. If it is a bitmap, use jpg, png, or gif. Vector drawings use SVG or icon fonts. Each has its own advantages and disadvantages. But you should always keep in mind the icon size-unoptimized pictures cannot be posted online. On the other hand, vector graphics are usually small, but some older browsers may not support vector graphics. Also, if the icon has a lot of curves, it may be larger than the bitmap, so choose wisely.

On the responsive WEB design of the nine basic principles are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.