Mobile Web beginners and web beginners

Mobile Web beginners and web beginners

The best reading is output. -Yuber

We are about to get involved in mobile Web. We are a little excited and nervous, hoping to bring some value to our future team. Record the mobile Web I know now.

The original article is taken from my front-end blog. You are welcome to visit

Address: http://www.hacke2.cn/hello-mobile-aop/

Some basic terms

For mobile Web, there are some basic names that need to be mastered. What is the pixel ratio of devices? The mobile Web kernel, viewport, and the minimum physical unit of the screen. I have recorded some records and will continue to add them later.

• -Common mobile Web terms

About Layout

Let's take a look at the most common layout of mobile terminals:

Layout of the upper, middle, and lower layers

The following three methods are available for the above pages:

• Fixed
• Absolute
• Flexbox

Fixed

For the first layout, the implementation principle is that the header and footer are positioned as fixed. Content page can be used-webkit-overflow-scrolling:touchOf course, iscroll can also be used for compatibility with unsupported ones. Fixed layout people on the Internet say that there are too many pitfalls and there are too many bugs during scrolling. In particular, the pop-up Input Method for form elements has many problems, so it is not recommended to use them. The following are some online references:

• -Mobile Web development practices-fixed the position: fixed adaptive BUG
• -Mobile web page position: fixed problem summary
• -Mobile Web development: four lines of code check whether the browser supports position: fixed

Absolute

Like fixed, it only sets fixed as absolute. Set its left and right values. The following is an absolute positioning DEMO.

• -Absolute positioning DEMO

Flexbox

I guess flexbox layout is modeled likeFlex* Layout mode. Because modern browsers used by mainstream mobile terminals support this CSS3 attribute. Flexbox layout is commonly known as a scaling layout. It can easily and quickly create an elastic layout. Flexbox is the first choice for mobile terminals.

• -Flexbox DEMO
• -[Translation] flexbox all secrets

Images and text non-background images

As a common mobile Web term mentioned earlier, device pixel ratio: 2's high-definition retina technology will blur pictures. Why?

Difference between Density and retina display

According to the calculation formula, a pixel is split into four smaller points, which are naturally blurred.

There are two solutions:

1. Settarget-densitydpi=device-dpi, Display according to the actual proportion, and then perform media query technology as shown in the following code:

#header {background:url (medium-density-image.png);}@media screen and (- webkit -device-pixel-ratio:1.5) {/* CSS for high-density screens */#header { background:url (high-density-image.png);}}@media screen and (- webkit -device-pixel-ratio:0.75) {/* CSS for low-density screens */#header { background:url (low-density-image.png);}}

 

One drawback is that you need to write separate code for each resolution.

In addition, multiple images can be displayed.canvasTo drawGPURendering ..

Background Image

Background-size is set to height and the adaptive width is 100%. This is also the property of css3.

Text

Px Unit

In traditional PCs, px is often used to set the size. Because it is relatively stable and accurate.

Em unit

There is a problem when you zoom in or zoom in the browser to browse the page, because the font size is fixed. To solve this problem, we can use the "em" unit. Em has the following features:

Rem Unit

remIs the property of CSS3, andemThe value is not fixed. The difference is that it refers to the exact value of a root element.emIt is relative to its parent element to set the font size, so there will be a problem, any element settings may need to know the size of its parent element, when we use it multiple times, this may lead to unpredictable error risks. And rem is relative to the root element.htmlThis means that we only need to determine a reference value in the root element.

After learning about the differences between px, em, and rem, we can make the following settings:

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; }

 

We can use some simple calculations when writing the size. For example, if a part of the design draft is 18px, we can write the code:

p : {font-size:18px；font-size:1.8rem}/*(1.8 x 10=18)*/

 

Animation

On the Mobile End, you don't have to worry too much about the platform compatibility. You can use CSS3 to complete the animation.

In my opinion, animation on the Mobile End is prioritized in the following order:

transition > Animation > js

And it is best to use translate3d to force the deviceGPURendering, but cannot be over-used. We can use the css3animation library animate.css to complete common animations.