9 basic principles of responsive web design
发布者： 先创点击： Release time: 2018-12-10 Publisher: Pioneer Click:
响应式网页规划关于处理多类型屏幕问题来说是个不错计划，但从印刷的视点来看，其却存在着许多的困难。 Tangshan Network's responsive webpage planning is a good plan for dealing with multiple types of screens, but from the perspective of printing, it has many difficulties. There are no fixed page dimensions, no millimeters or inches, and no physical constraints, which makes people feel unable to start. With the increasing number of gadgets available for building websites, it is also a thing of the past for pixel planning to be limited to desktop and mobile. So now let's clarify how to use the basic principles of echoing web planning to accomplish, rather than resist a smooth web experience. For the sake of brevity, we will focus on the layout.
Responsive planning vs adaptive web planning
Seemingly the same truth otherwise. These two planning methods complement each other, so there is no right or wrong. The specific situation depends on the content.
As the screen size becomes smaller and smaller, the content takes up more and more straight space, that is, the content will extend downward, which is called content flow. If you are used to planning with pixels and points, you may find this a bit difficult to grasp. But it doesn't matter, you get used to it.
Your planning goal may be a desktop desktop, or a mobile screen or an arbitrary screen type in between. Pixel density will also be different from each other, so we need to use units that are sensitive and variable and can get used to various situations. In this situation, relative units such as percentages come in handy. When using percentages, we say that 50% width means that the width occupies half the screen size (perhaps the viewport, which is the size of the browser window that is opened).
Breakpoints can deform the page layout at preset points, that is, three columns appear on the desktop and only one column on mobile devices. Most CSS features are capable of transforming between breakpoints. Where the breakpoint is placed generally depends on the content. For example, if you want to wrap a sentence, you may need to add a breakpoint. But you need to be careful when using breakpoints-if you can't figure out the logical relationship between the content, it is easy to make a mess.
Maximum and minimum
Sometimes it is meritorious to fill the entire screen width (for example, on a mobile device), but if the same content is also full on the TV screen, the shape seems unreasonable. That's 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 with a width that does not exceed 1000px.
Remember the relative position? If a large number of elements are closely related to each other, it will be difficult to manipulate. As a result, placing the elements in a container makes them more understandable and concise. This situation requires the use of static units such as pixels. Static units are useful for things like logos and buttons that don't require expansion.
Mobile first is still desktop
Strictly speaking, the transition from a small screen to a large screen (mobile priority) is still the same as the transition from a large screen to a small screen (desktop desktop priority). However, starting with the mobile terminal can bring you some rated constraints to assist you in making decisions. Under normal circumstances, we will start from two aspects together, so you still have to see which method is best for you.
web font vs system font
Want to make your website cool Futura or Didot? That is to use web fonts. Although web fonts look cool, you have to keep in mind that these fonts require users to download them. The more words there are, the longer the user will load the page. On the other hand, the system font load is much faster (provided the user has it), but it is too general.
Bitmap vs vector
Does your icon have a lot of details and apply a lot of rich effects? If so, use bitmaps. If not, consider using vector graphics. For bitmaps, use jpg, png or gif. Vector graphics are best using SVG or icon fonts. Each has its advantages and disadvantages. But you must always keep in mind the icon scale-images that have not been optimized cannot be posted online. On the other hand, vector graphics are generally 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 you must choose correctly.