Html5 layout experience sharing-1st sets and html5 Experience Sharing

Html5 layout experience sharing-1st sets and html5 Experience Sharing

The mobile terminal layout is much simpler than the pc terminal layout, and there is no need to consider the compatibility. The various features of css3 can be easily written. (My opinion)

I have been working on the mobile web layout for a period of time. I have summarized some of the problems I encountered here, all of which are my personal opinions. You can make a lot of projects .....

 

1. The layout must use an Adaptive Layout, provided that the width height of the body is set to 100%;

 

2. the common reset.css is used to remove the default style of the browser and use the custom default style to unify the basic style of Each browser;

 

3. Prepare the meta tags in the head, because this is essential. Below are my frequently used

    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta charset="utf-8">    <meta content="yes" name="apple-mobile-web-app-capable">    <meta content="yes" name="apple-touch-fullscreen">    <meta content="telephone=no" name="format-detection">    <meta content="black" name="apple-mobile-web-app-status-bar-style">    <meta content="#ffffff" name="msapplication-TileColor">    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

4. analyze the structure and hierarchy of the page before layout.

Write down the structure of some la S, write the structure, and then write the css layout and style. This will be much faster. After the layout is completed, preview and debug the layout, avoid refresh the page once when writing a row, which may delay time;

 

5. Leave the specified width blank on both sides of the page

In general, there will be some white space on both sides of the page, which will look a little more natural, directly use div, css does not set its width to 100%, margin left right = 10px, if set to width: 100%, the page will be opened, because it is already 100%, and the plus margin will definitely exceed;

 

6. positioning is the most useful.

Position: absolute, position: fixed is the most widely used, and can also be replaced by float and margin in some cases. Adjust the position of the element by adjusting the value of margin;

 

7. The float element in the div does not support the height of the div.

If the elements in div wraper are floating, you will find that the height of the outer div does not exist. What I usually use most is to set overflow: hidden of the outer div; of course there are many other methods;

 

8. The effect of the internal webpage and the browser is quite different.

A: After readonly is set for input, clicking input on apple won't pop up the keyboard, but the keyboard will pop up when you open the webpage on the android phone, and it won't pop up in the andorid browser, the final solution can only be replaced by span, which is helpless. I don't know if there is any good solution;

B: inner browsing. After position is set, the number in the div will be recognized as the color of the mobile phone number. At that time, I did not know the problem because meta was added, it doesn't work at all. If one row is deleted, the result is the position setting problem. The last optimization is used to solve this strange problem;

 

9. media response

There are not many full-battle response styles, and many small ones need to be used. For example, if a row of prompt information needs to be displayed without line breaks and 6 P is displayed, a line break will be displayed on p5, for example, a line break is displayed in p5, so you need to use media to control its width;

 

10. the page font and size are often described in rem. I have never used this item. I have never set the font size of the page because it is 16px by default and 14px is used for small fonts, if the value is larger than 18 PX, you can customize other values;

 

11. The click Event of the element may have a latency of 500 ms on the iphone. You can use the fastclick plug-in to solve the problem. After introducing this js code, the code will be carried. The slow positive symptoms will instantly disappear.

window.addEventListener('load', function() {  FastClick.attach(document.body);}, false);

 

 

 

 

Legacy problems:

1. when you create an im chat page, the message input box uses position: fixed at the bottom of the page to locate the bottom. However, some mobile phones often have a keyboard pop-up to cover the input box, sometimes it will not appear, and the cycle will alternate. The layout of his page is dynamically set through js, but the effect is not obvious and cannot be solved!

 

 

The above are my personal opinions and opinions on what I have seen and asked during development. Please take a picture! In the future, I thought of other ways to continue writing 2nd sets;