Mobile End Project Summary

Introduction: Just completed a simple mobile project, single from the layout, with the PC-side approach is roughly the same.

The mobile page layout is more simple, based on a single line, progressive layout. The only dimension problem to be aware of is that the size of the mobile device varies, so consider a page layout that adapts to the width of the mainstream mobile device. Generally the most common is the row center effect, so the layout is generally not because the screen width is too small to squeeze the problem.

There is also a reference to the scaling problem of a mobile device. The resulting page may not fit perfectly into the screen width of the mobile device, so you need to declare the device width in the HTML document:

1 <  name= "Viewport"  content= "Width=750,maximum-scale=1,user-scalable=no"  >

　　

Dynamically set Page size

The usual element size units typically use "px" pixels. In addition there is a dimension unit "REM" based on the root node. The characteristic is that the size of the element is calculated according to the size set by the root node.

1 <style>2 HTML{3 font-size:100px;4     }5 6 P{7 font-size:0.2rem;8     }9 </style>

The size of the P tag here is 100px * 0.2 =20px. The advantage of this setting is that when the page size changes, you can set the base size of the root node, and proportionally change the size of the page content.

To set the page size in conjunction with the @media method:

1 <style>2 @media (min-width:768px){3 HTML {4 font-size:100px;5}6     }    7 @media (max-width:768px){8 HTML {9 font-size:50px;Ten} One     }     A P{ - font-size:20rem; -} the </style>

Mobile End Project Summary