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

This article introduces the relevant knowledge of "H5 responsive page making". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

H5 responsive page making

1. Full-screen pages are very unsuitable for responsive layouts:

Due to lack of experience, I chose to use the responsive layout of full-screen scrolling to write a blog. In practice, I found that due to the existence of ipad and the horizontal and vertical screen mode of the mobile phone, and the full-screen mode makes each frame become a screen, which has strict requirements for the ratio of width to height. In the form of a variety of mobile phone styles, this kind of frame has to show all the content. It may only be suitable for pages with less information.

two。 Questions to pay attention to in terms of responsive css:

The format of distinguishing cutoff points in the @ media screen and (max-width | | min-width) style must be strictly observed, and any space problem will cause display errors.

Store the smaller device css below, otherwise it will cause you trouble. And the minimum font of the responsive page is 12px.

The Google browser console is displayed on the right side of the page, which greatly improves the writing efficiency of responsive layout css.

The best conversion ratio for rem units is 625% and 62.5% will have errors, especially on the PC side.

In the height range, sometimes using px to write death is a good choice.

3.js web page section:

For the five web page display images to switch from left to right, due to the last bilibili experience, Lao Niu immediately thought that using the insertAfter function to control the positioning of the map was the best choice. Write the corresponding div container in css style in advance, so when switching layers left and right, you only need to adjust the node position of the first or last picture with the transition attribute. This is one of the best choices in terms of code volume and performance, and the only deficiency is compatibility. The focus of this part is that the focus container (in the middle) clicks to connect, and the left and right pictures click to move. After thinking about it, the old cow finally decided to store all the connection addresses in an array in advance. Because the index of the target layer node is always changing, each container is pre-added with its corresponding class name + index value during initialization (so that no matter how the node changes afterwards. The index value retained in this initial class name can be linked to the corresponding link, but if I were asked to do it now, I might choose to save it with data). Next, the focus position is controlled by an index value globally, and each move adds the link address obtained by regular matching class, while the others remove the link address.

4. Special effects part 3D rotation rotation:

If the light is not difficult to achieve a 3D rotation, but due to the existence of the mobile phone, the 3D rotation will be cut vertically at the PC end, while the mobile phone end will be cut horizontally, and all the width and length parameters will become uncertain due to responsive intervention, and almost all the values are unknown, so the calculation of this part burns a lot of my brain cells.

It is worth noting that because all the length and width can not be written down need to be calculated, js in the calculation process of the decimal point error let me suffer a lot. But now I might choose to use the flex box model properties to do it!

This is the end of the content of "H5 responsive page making". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.