Good programmers share mobile page layouts with Web front-end technology

A, elastic layout (100% layout) characteristics

The height and position of bar at the top and bottom remain unchanged no matter how the resolution is changed. Every job Posting in the middle, regardless of resolution, has information such as the company’s icon on the left side of the entry and salary on the right.

Features: The height width and position of key elements are unchanged, only the container elements are scaled. For this type of app, just keep one principle in mind: text streaming, control elasticity, and image scaling

  • ​

    What is screen size?

    Mobile screen size: The diagonal length of the screen, in inches (1 inch =2.54 cm).

    Common sizes are: 2.4, 2.8, 3.5, 3.7, 4.2, 5.0, 5.5, 6.0

  • ​

    Three,What is screen resolution?

    Screen resolution: refers to the number of pixels in the vertical and horizontal direction, expressed in px,1px=1 pixel point.

    A mobile phone’s screen resolution is usually measured by vertical pixels and horizontal pixels. Such as: 1960 * 1080

    A pixel here is a pixel on a physical device.


    What is screen pixel density?


    Screen Pixel density: The number of pixels per inch that can be displayed on a screen. The unit is called Pixels per inch.

    Screen pixel density is related to screen size and screen resolution. Under a single condition, the smaller the screen size, the higher the resolution and the higher the pixel density, and vice versa.

    The difference between the iphone3GS and iphone4: the screen size is the same, the screen resolution is twice as different, and the pixel density of the screen is twice as different.

    ​

    PX: pixels, dividing the display into very small squares, each one 1px.

    Note: The px used in web refactoring is not necessarily the same size as the screen resolution PX.

    There are actually two types of pixels: device pixels and logical pixels (CSS pixels)

    DPR: devicePixelRatio (DPR) is the ratio of device pixels to CSS pixels when the default scaling is 100%

    In earlier mobile devices, there was no concept of DPR. With the development of technology, the screen density of mobile devices is getting higher and higher. Starting with the iphone4, apple introduced the so-called retina display. It is called a retina screen because the PPI(screen pixel density) is so high that the human retina cannot distinguish pixels on the screen. The iphone4 has doubled the resolution, but the screen size has not changed, which means there are twice as many pixels on the same size screen, so DPR = 2

    Five, equal scale layout (REM layout)

    1. What is REM?

    Rem (font size of the root Element) is a unit of font size relative to the root element.


    2. Why do Web Apps use REM?

    Achieve powerful screen adaptation layout (Taobao, Tencent, netease and other websites are REM layout adaptation) REM can be equally proportional to all screens, according to the change of HTML font size to control the SIZE of REM,

    Six, vw vh

    Viewpoint width: 1vw = 1% of the viewpoint width

    Viewpoint height: 1vh = 1% of viewpoint height

    Vmin: The smaller of VW and VH.

    Vmax: The larger of VW and VH.

    Vw, vh, vmin, vmax, ie 9 + local support, chrome/firefox/safari/opera support, iOS safari support, 8 + Android browser4.4 + support, chrome for android39 support


    Rem with VW to do equal scale layout

    1.rem

    Rem is the unit of font size relative to the root element.

    2. The root element

    If the root element is relative to the device size is automatically changed.

    3.VW

    Window width, 1vw is equal to 1% of the window width.

    4. Convert VW to PX and assign the value to font-size

    Example: The resolution of the device is 640*1136 and the logical pixel is 320*568 1VW=3.2px

    Font-size:100px; Font-size :31.25 VW;

    1rem=31.25 VW can be combined with write equal scale layout.


    8. 100% Layout (flexible layout)

    Implementation scheme: using PX, with the help of elastic box.


    Nine, equal scale layout (REM layout)

    1. HTML {font-size:31.25vw; }

    31.25vw=100px(50px or 100px as the base unit)/3.2px

    3.2px=320(viewport width) /100(1vw equals 1% of the viewport width).

    Element size (REM) = original size/DPR /100 (50px, 100px as the base unit)


    2, use media query to set HTML font size with REM (set judgment condition node)


    3. Set the font size of HTML dynamically through JS. Similarly, element units should also be matched with REM to achieve equal scale layout.