Mobile Web Development Pits (i)

Last week began to touch mobile web development, silently fell into a lot of holes inside. This article mainly summarizes the pits encountered this week and how to pits.

1, PX and REM conversion.

The width of the design is generally 640px, and the iphone is 320px, so the results of the measurement design first to be in addition to 2, then the unit or PX, the next step to convert to REM, how to convert it? Depends on how the root node is set.

First of all, the default font for any browser is 16px, all the unmodified browsers conform to: 1em=16px; so 10px=0.625em; for ease of calculation, the body can be set font-size=62.5%; here, the conversion relationship is 10px= 1rem.

In summary, the design of the PX, in addition to 20 into REM, so, we set a variable unit=20, in less, the design of the number of directly divided by @unit.

Because I did not follow the above method, I challenged my mental arithmetic ability and patience, hahaha ...

2, 1px lines in the retina screen display 2px;

This issue is explained in the previous article, "Fundamentals of mobile Web development-pixel". The reason why still fall in the pit, because the development of the forgotten this stem ...

After knowing the reason, we will solve the problem. To render 1px on the phone, we have to write 0.5px, because not all iOS system support 0.5px, so in order to achieve 0.5px, we can be 1px 0.5 times times, horizontal line on the vertical contraction ScaleY (0.5), the vertical bar on the transverse ScaleX (0.5).

Next is about the way the line is inserted, in order not to affect the HTML structure, it is best to insert the empty content through the pseudo-class of before or after, then set the border to 1px, or a wide background or something.

　　

3, a link press up to appear black background;

The problem is one line of code:-webkit-tap-highlight-Color:transparent; add it to the style of a.

4, do not use the HTML img tag, the picture is placed in the style when the background. The advantage is that you can compress the picture two times.

　　

Mobile development also need to accumulate experience ah, the first time spent a lot of time all kinds of design draft various code to find the big God all kinds of information, but,i enjoy it!

Mobile Web Development Pits (i)