Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "what is the method of Web mobile page reconstruction". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the method of Web mobile page reconstruction" can help you solve the problem.

First of all, let's learn some concepts about the layout of mobile devices.

What is the mobile page layout?

Mobile page layout, a good page layout can reduce the amount of code and reduce the repetition rate of CSS3 attributes. Therefore, a good layout is very important, reasonable arrangement of tags, reasonable naming of tags, samples can improve the performance of the page.

What is Viewport?

It is the browser, which is used to display the part of the web page, that is to say, the actual width of the browser is different from the width of our phone, whether your phone width is 320PX or 640PX, the width inside the phone will always be the Viewport of the browser itself.

What is pixel density (PPI)?

The number of pixels per inch on the screen can be displayed in PPI. The screen pixel density is related to the screen size and resolution. The smaller the screen size, the higher the resolution.

What is DPR?

The corresponding relationship between the physical pixel and the logical pixel of the device, that is, the physical pixel / logical image display, the ratio of the device pixel to the CSS pixel when the default scale is 100%.

Common mobile screen size

3.5 inch, 3.7 inch, 4.2 inch, 4.7 inch, 5.0 inch, 5.5 inch, 6.0 inch, this is the most basic concept of page refactoring on mobile.

Common units of mobile page reconstruction

Because it has to adapt to all mobile screen sizes, traditional px layout pages are not very suitable on the mobile side.

How to achieve a strong screen adaptation layout, you need to know what rem is.

1 html Rem refers to the unit of font size relative to the root element, which adapts to all screens in proportion, and controls the size of the rem according to the change of the font size of the root element.

JS calculation: by getting the width of the viewport / the width of the actual design drawing * the font-size of html

2Gen CSS3 new unit VW,VH

VW: window width, 1VW equals 1% of window width

VH: window height, 1VW equals 1% of window height

We can also convert VW to PX and assign values to font-size

The size shown by the element (fixed size of the design drawing) = (width of the VW* design) / 100

VW = size shown by the element (fixed size of the design drawing) * 100 / width of the design draft

VW,VH is a new unit of CSS3, it can only have its own compatibility, IE9+ partial support, chrome/firefox/safari/opera support, iOS safari 8 + support, Android browser4.4+ support, chrome for android39 support.

Case analysis

The common layout methods for mobile devices are 100% layout, rem layout and VW layout. First of all, let's look at the advantages and disadvantages of their respective layouts through several cases.

1. 100% layout case

The 100% layout is our flexible layout, which has its own characteristics. As can be seen from the actual example of the following figure, no matter how the resolution of the top and bottom bar changes, its width and position remain the same. No matter how the resolution of each recruitment message changes, the recruitment company's icon and other information are located on the left side of the item, and the salary is on the right. This is one of the benefits of our 100% layout, which can give full play to the advantages of large mobile phones. The bigger the phone, the more content will be displayed.

If we take a closer look at the following case, we can find that the larger the picture is, the larger the spacing is, the font size is also changing, and the proportion will be out of proportion, which is the disadvantage of 100% flexible layout.

2. Rem layout

Rem layout is proportional scale layout, from the following case analysis can be seen, whether it is placed in iphone5, iphone6, or iphone6Plus, they are proportionally scaled, pictures should be mostly large, small all small, this is the characteristic of rem layout page, it is our most commonly used mobile page layout, of course, we can also use css3 new VW to layout.

Css Code:

This is the end of the content about "what is the method of page refactoring on Web mobile". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.