Reprinted-responsive Web design-html5 and css3 practices-Reading Notes

Let's play with HTML5 & CSS3!

----------------------------------------------------- Reprint original --------------------------------------------------------------------------------

The positioning of this book is not an API manual, but a practical skill. It gives me a feeling like the positioning of the impeccable web design. It is also like the style of DOM javascript programming art, use an actual case to go through the book. Although the title is subject to "responsive Web design", the book does not only focus on responsive design. Its main line is responsive design, but it is interspersed with a lot of html5 labels and css3 knowledge, without js knowledge. Therefore, the author's identity is more like a domestic css reconstruction engineer.

Abstract Some impressive points and analyze them with my own ideas:

 

1) The responsive design has two basic conditions. The first is to set the viewport to device-width, and the second is media query. This is the foundation of responsive layout, just like the truth of css sprite is the background-position. Knowing this, responsive layout is half done.

Media queries can be used to determine the window width and height of the current device, such as horizontal and vertical screens. They are equivalent to using css to write if and else to the current device. The usage of specific media query can be viewed here, very detailed: http://dev.oupeng.com/articles/css3-conditional-intro

It is worth noting that @ import url ("xxx.css") screen and (min-width: xxx px) is written in this way. Because if you write styles at different resolutions in a single file and use dynamic loading, if a file corresponds to a link tag, you need to add many modules. If you import these scattered modules into the main css file, you only need to dynamically load a module. It is best not to expose dirty.

 

2) For responsive layout, you need to find several mainstream resolutions as critical points and make several different versions for mainstream resolutions.

These mainstream resolutions come from terminals you need to support: desktops, laptops, iPhones, ipad, android phone, android pad, winphone, BlackBerry, etc. First, determine the terminals you want to support, and then collect relevant data to see the resolution and market share of these terminals, and finally determine a list of supported terminals. This support list should be maintained all the time, maybe not so frequently, but there should be no stopping time-the fragmentation of mobile terminals, you know, one android is enough for you, let alone so many devices. This cost is much higher than the fixed-width layout.

After determining the support list, you need to take the data to the designer to design several different typographical copies. In this process, front-end engineers and designers must communicate frequently to assess the possibility and cost effectiveness of the design. This cost is much larger than the traditional fixed-width layout.

After the design, the front-end should divide the css layout into two layers. The bottom layer is the common part of each resolution, and multiple branches need to be written on the front end, which correspond to different resolutions respectively. Development and maintenance costs doubled.

In the end, from design to development, the cost of each link is much higher than that of Fixed-width layout. The product development time will be much longer than the original development of the wide network webmaster, the workload of designers and engineers will be much larger. In practice, it is estimated that this can only be pushed from top to bottom in the company. I guess most engineers won't want to find such a chore for themselves, even if the engineers are keen on the responsive layout of this new stuff, designers do not like it. This is not something that an engineer can play.

 

3) Fluid layout.

Fluid layout was first introduced in "NONE", but because there is no strong market demand, the concept of Fluid layout is only sought after in the front-end circle for a short period of time, without the advent of the mobile Internet, the Fluid layout has almost been forgotten. Fluid layout is a necessary part of responsive layout, so this time it is revived.

The Fluid layout is actually divided into two types. One is to fix one side and make the other side adaptive. In the past few years, the popular negative margin layout is easy to implement. The other is adaptive on both sides, scale up or down at the same time in proportion, which is troublesome. This book introduces the latter. Specifically, it uses the unit of percentage to make the width and height of all elements adaptive, including the font size, instead of simply breaking long text.

In fact, I personally do not quite agree with the recommendation of "ring". In particular, we can see that all units must undergo a Division before they can get the final result value. The result value is similar to "margin-right: 2.6595745%; "this bt value is big if you think about it. In the future layout, you need to open the calculator... I can't stand it anyway.

When I do a responsive layout, I will adopt the idea of a negative margin layout, fix the width of one side, adapt to the other side, and then use PX for all units. Different mainstream resolution branches, different sizes may be set, but PX must be used as the unit.

 

4) network font.

@ Font-face I heard about it early in the morning, but @ font-face cried T_T when it met Chinese characters. If it was an English font, it would be a few abcd and common symbols, but the Chinese characters are different, chinese text is not spelled together by letters, so the Chinese font file will be very large. So when I saw the network font, I always thought that this stuff would be ignored when it came to China's national conditions.

"Xiang" introduces another use of @ font-face, which makes me shine, this makes us feel that @ font-face is still a treasure in the Chinese environment-you can use a network font to make letters look like icons! The small icon of the icon can no longer use the image, and even better, because it is actually only a font, it can be easily changed through font-size, it is Vector! Don't talk nonsense, look at this website to know what I'm talking about: http://fico.lensco.be/

In addition, it should be noted that the font may appear blurred when @ font-face is used, which can be solved by setting font-weight.

 

5) Use a linear or radial gradient to generate a background pattern.

It is worth noting that linear or radial gradient is used alone as the background. However, if you combine the two, you can use repeating-radial-gradient to generate a very beautiful complex background! These backgrounds can even replace some tiled images. Surprising idea: http://lea.verou.me/css3patterns/

 

6) Verify form 2.0.

The author of Xiang is glad that html5 form 2.0 can complete form verification without passing JavaScript. But I am skeptical about this. First, the form is not necessarily submitted through submit, but may be submitted through ajax or websocket. Second, the prompt after verification failure cannot be customized by yourself, what kind is provided by the browser is what, similar to the title attribute of the UI display can not be customized; third, the form of verification seems not so accurate, last year I did the relevant demo: http://hi.baidu.com/cly84920/item/ea0a0f7c343e29336e29f685

 

7) responsive layout case website-a source of inspiration for css engineers and designers.

At the rise of website reconstruction, a website called Zen garden was built at http://www.csszengarden.com/to demonstrate css layout possibilities. Various cssworks were collected to demonstrate the power of css. It is intended for css engineers. Responsive layout also has a similar site http://mediaqueri.es/, which collects a series of responsive layout cases. Responsive design is a new concept. Unlike css layout, it is only a technical revolution for engineers. It affects both front-end engineers and designers. Designers also need inspiration, how to deal with the same set of images, adapt to various resolutions at minimum cost, and ensure that the primary and secondary images are clearly defined and the content is given priority.

This website allows engineers and designers to find inspiration. At this stage of exploration, it is particularly important to have such a website.

 

8) responsive layout is not necessarily the answer.

As I mentioned in my book, many people are skeptical about responsive layout. Myself, I am also skeptical about responsive layout, because its communication and development and maintenance costs are really low. Responsive layout is not necessarily the answer, at least not the only answer. For example, I do this project, http://hi.baidu.com/cly84920/item/b29a8d4ec0fdc7f0dc0f6cd1, there is no use of responsive layout, and I think for this project do not use responsive layout advantage is greater than harm. As the author said, html5 is not used, and responsive design is not required. You need to "view the situation ".

No matter how you use it, it is always necessary to understand this method. If you have more weapons, you have more options.

 

After reading this, I felt like I had read "NONE", and I felt that the technology had to be updated. In those years, the css2 layout replaced the table layout, which caused a great wave of learning and Dynasty changes in the industry. Those who are unwilling to follow up will be eliminated in a few years. Nowadays, css3 and mobile Internet have brought about new changes. Many things are different from those of the past, and those who do not want to follow up will be like those who insisted on using table layout in the near future, eliminated by the times. History is always surprisingly similar, and the changes of the times do not shift by the will of the people, or follow up, or eliminate, the kids shoes on the IT boat, don't struggle, learn IT. Alas...

Certificate ----------------------------------------------------------------------------------------------------------------------------------------------------

Original article address:

Responsive Web design-html5 and css3 practices