Mobile WEB layout video tutorial

"Mobile WEB Layout Video Tutorial" introduces the basics of mobile web development, efficient typesetting and layout, common mobile web problems, terminal touch interaction, how to solve various bug pits, etc. When it comes to the mobile side, we have to mention the issue of adaptation. Mobile devices of all sizes not only make it difficult to build Android and iOS, but because of the differences in device size and browsers, the front-end is now starting to have a headache. However, the method is always better than There are many problems. We are a revolutionary team and we must take action when we encounter problems!

Course playback address: //m.sbmmt.com/course/428.html

The teacher’s teaching style:

The teacher’s lectures are vivid, witty, witty, and touching. A vivid metaphor is like the finishing touch, opening the door to wisdom for students; a well-placed humor brings a knowing smile to students, like drinking a glass of mellow wine, giving people aftertaste and nostalgia; a philosopher's aphorisms, cultural references Proverbs are interspersed from time to time in the narration, giving people thinking and alertness.

The more difficult point in this video is the special style processing of mobile web:

The problem of high-definition pictures

High-definition pictures are not the same as the kind of movies we usually download High-definition pictures are different. The concept of high-definition pictures on the mobile Web is that my picture is as big as mine and has so much clarity, so we should display it so clearly on mobile devices. So why is there ambiguity? If a picture is 100px * 100px, then we will display it as 100px * 100px on the mobile device. There is no problem if you think about it.

But let’s think about it, on the Retina screen, one px is equal to two dp, so if you use 100px*100px, you are actually using 200dp * 200dp physical pixels for rendering, and the picture will be enlarged and blurred.

When rendering images on mobile web pages, in order to avoid blurring of the image, the width and height of the image should be rendered in physical pixel units, that is, for a 100 * 100 image, 100dp * 100dp should be used.

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

To put it bluntly, on a high-definition screen, if the picture is 100*100, then we should use 50*50 px to render. If the dpr is greater than 2 under iPhone6 ​​Plus, then We should divide it by dpr(3) like this.

Here we also recommend downloading source code resources: //m.sbmmt.com/xiazai/code/2051

This video courseware is shared with everyone:

1. Mobile WEB layout video tutorial

The above is the detailed content of Mobile WEB layout video tutorial. For more information, please follow other related articles on the PHP Chinese website!