HTML5 Page Layout Summary

Write a humorous digression, a summary of the recent experience. 2017, seems to be a troubled AH, the work encountered some bad, it is a very good vision, but now seems to be shattered, holding "situations, Vista" Hope, at present may also want to slim, nothing, work always solve the matter, or have their own advantages, I believe that their own, OK , give yourself a pep talk and write about it.

Used to do mobile webapp development, the screen is relatively small, mobile phones are a version of a fixed product version, the interface layout casually Bubu, repair modification will be OK. Later contact with the PC screen development, the interface elements immediately increased a lot, do not pay attention to the layout will be very confused and passive, in fact, want to summarize the layout has been a long time, but there is always no good to summarize, in addition to the previous project on the adaptive requirements is not very high, recently made an interface, Interface elements of various irregular layout, and there are animations, network networking products also require to be able to adapt to a variety of screens, a variety of browser version, before doing the project most hated IE browser, feel it is always so personality, a variety of incompatible, do this product unexpectedly found the advantages of IE browser, ie browser version less, Convenient browser for various versions of compatibility testing, for unsupported H5 properties, there are various major gods developed a variety of search pieces, these plug-ins can solve the low version of IE H5 features of the unsupported problem.

The words return to the positive turn, the following begins to summarize H5 interface layout problem.

1. First, to get an interface UI design, you need to first block the interface, divided into several sub-development. H5 has a feature, is the semantic layout, I also used in the layout, may be affected by the previous Firefox OS project, the project on the semantics of H5 or use to listen to the full, this semantic use of some of the benefits I did not say (structured), but this layout under IE9, IE8 IE7, it is not good, they do not recognize these tags, in these versions have a deep understanding of what is the div+css layout, this layout will not bring the label does not recognize the problem.

2. The block is good, if you want to compatible with IE version, choose Div+css Layout, start the specific layout. In the layout, the Position property is very important, div element position if you do not need to adjust, according to the box model to go down, you do not have to set, take the default value of static, if you want to offset, set to relative, the element will not be separated from the document flow. On an element, there are other elements in its placeholder somewhere, then the outer div is set to relative, its position on the element is used absolute to locate, and to top:0;left:0 to offset; here, when the element is offset, The use of how the unit is very important, for the interface, to the interface at a certain location of the element, the interface width width,left and top use% to offset, so that at any resolution of the screen, the elements are in the same position relative to the interface, so that the element on any display can be normal display. However, if for an element fast, there are other elements in the composition, they make up a single layout, and the position is not regular, then the internal elements use absolute for layout, and the top and left use rem layout , So at any resolution, the element block, although the display size is different, but the relative position of the element block is unchanged, the element block has been a whole. In addition, if an element is a absolute element, it also has elements inside it, use relative, and use REM as the unit, so that this element is one, the whole, and the layout as a whole in any resolution.

3. The element block of the same line, if divided into several parts, then the outermost element using the relative layout, inside the use of position:relative;display:inline-block;width:20% The proportional layout (you can also consider using the Flex layout here), through left. Top to adjust the position of the child element block and adjust the left,top to achieve adaptive resolution at different resolutions. If there are child elements inside the block element, then the block is divided, and the element width is defined using%.

4. About the adaptive, different size of the display, different resolution, to find the different resolution of the position changes in the element, according to @media screen for the position of fine-tuning , in fact, need to fine-tune the elements, many of the top for REM units, left as a percentage of the element, At each resolution the position of the left offset is unchanged, in order to be self-adaptive, the layout of the interface with as few elements as possible relative to the position of the interface is unstable. When doing self-adaptation, pay attention to the various resolutions of the writing, if used max-width, then the order should be significant to the small write, so that the interface can be used to the most suitable size.

5. Adaptive debugging by adjusting the resolution to achieve, as the Internet products, browser compatibility testing is very important, at this time IE is very advantageous, IE11 browser, there are IE5 IE7 IE8 IE9 mode, can be directly tested, there are IE tester tools. But Chrome and Firefox are miserable, currently only online tools, fees, free is also limited, and foreign sites, domestic which slow ah. Spoon Browser Sandbox in a word, this tool can also, through the installation of plug-ins, plug-in simulator allows the installation of various versions of the browser, test, here is a pit, is his plug-in Windows7 can be installed on the use of WINDOWS10 on the installation.

Browsershots This tool requires you to be able to publish your Web page to the public network, run on the remote server, sent to you, but the number of daily release is limited, and can only be free for one months.

IE Netrenderer this is to test IE browser, with IE11, meaning is not particularly large, and some browsers are not test out.

Talking about a hole in the test. Firefox browser version 21.0, the absolute positioning of the elements, box-align:end and the usual use of the difference, the solution is in the original Div structure, in the addition of a layer of div, using relative positioning, and then use this Box-align:end property, But the height of the parent div needs to be adjusted, in short, this version is very different, according to the actual situation to deal with it.

6. Say H5 canvas and CSS animation, deeply experience an animation, if it is a few elements of linkage, or obediently use div and CSS Linear animation bar, if it is linear animation, using canvas, In fact, the canvas is on a container, call the interface timed to redraw,canvas does not support the skew property, can not achieve deformation. Animation in the

transform-origin:50% 50%
I thought it was only in 0% when the settings are all in effect, if the animation position is changed, not the default center point location, to be set at each progress. jquery's animation () interface, seemingly all can be implemented with CSS animation, animation-fill-mode:forwards; attributes are important for some animation effects. If you want more animation effects, it is necessary to understand the Bezier curve well.
If you want to implement adaptive, the width and height of the canvas are also set using%.
Insert part of the effect.

HTML5 Page Layout Summary