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

This article mainly introduces "what are the knowledge points of HTML5 mobile page layout". In daily operation, I believe many people have doubts about what are the knowledge points of HTML5 mobile page layout. Xiaobian consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "what are the knowledge points of HTML5 mobile page layout"! Next, please follow the small series to learn together!

I. The difference between mobile devices and PC terminals

We want to learn mobile layout first to understand the difference between "mobile" and "web" layout? That's the size of the screen! When it comes to screen size, we have to mention the viewport, which is the area of the device terminal used to display web pages, not the visible area of the browser. It can be larger or smaller than the viewable area of the browser, but in general the viewport in mobile devices is larger than the viewable area.

Browsing now provides a default value for a viewport, usually 980 pixels or something else. According to some tests on new versions of browsers on different platforms, the default viewport on Apple phones is 980 pixels, as well as the browser on Android mobile phones. The viewport of the latest mainstream browsers is also 980 pixels.

2. The practical role of the viewport

Because the default value of viewport is 980 pixels, it only applies to PC and not to mobile phone screens. Therefore, the mobile browser will appear horizontal scroll bar. At the same time, even if it is based on a 980 pixel viewport, our experience of browsing our desktop page on the mobile side is actually not good, so in general, we will control the viewport to design a page specifically for the mobile browser.

III. Actual combat settings of viewport

Most browsers now basically support a viewport setting. Let's first look at some of the properties of the viewport. The viewport has a total of six debuggable properties, which are:

width property: Set the width of layout viewport to a positive integer, or string "width-device"(usually set: "width-device");

initial-scale attribute: Sets the initial zoom value of the page, which is a number and can be decimal;

Height attribute: Set the height of layout viewport, this attribute is not important to us, rarely used (generally we do not use);

maximum-scale attribute: the maximum zoom value allowed by the user, which is a number and can be decimal;

minimum-scale attribute: the minimum zoom value allowed by the user, which is a number and can be decimal;

user-scalable attribute: Whether the user is allowed to zoom, the value is "no" or "yes", no means not allowed, yes means allowed.

Here is a sample of our viewport writing: (usually without modification)

This way we can control the viewer.

IV. Mobile equipment

As a programmer developing on the mobile side, if you don't understand some of the performance of the device, it is a very time-consuming thing to develop, but it also has a negative impact on the progress of the project.

Here are some of the resolution parameters for mobile devices:

It can be seen that the size of the mobile end is different from each other. If you want to adapt these size, you can only write it through a certain proportion.

V. Use vw layout

In order to adapt to the size of each device, the mobile terminal layout used to be adapted to each device through js and rem, but using rem requires calculation of html fontsize, and a key point of this calculation is to obtain screen width, where 100vw is equal to screen width. At this time, if this calculation formula is put into css, it will be perfect, because in order to obtain screen width, js is not used, but vw is used to solve this problem, because 100vw = screen width.

At this point, the study of "what are the knowledge points of HTML5 mobile page layout" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.