Mobile-side Layouts

1. Scroll bar is in HTML by default, move to Body

HTML {   width: 100%;    height: 100%;    Overflow: hidden;} Body {   width: 100%;    height: 100%;    overflow: auto;}

2. HD Screen 1px border restore

// because like Silverhalide is magnified, the zoom ratio can be scaled down, as long as the multiplication is 1 to get 1px var pixelratio = 1/ window.devicepixelratio; // the zoom ratio of the viewport is set dynamically via JS
+ ', Minimum-scale = ' +pixelratio+ ', maximum-scale= ' +pixelratio+ ' "/> ');

3. Units used

PX absolute units, in any case are fixed values, in different sizes of the screen will be misplaced.

% relative units, calculated relative to the size of the parent (itself). The use of percentages in places where certain values are not very good, such as height, can cause deformation.

Em relative units, in multiples of the current font size. If the container font size is different, the modification is cumbersome.

REM relative units, which are compatible with the font size of the HTML (root element) and the mobile browser, are common.

   var html = document.getelementsbytagname (' html ') [0];    // Screen width   var pagewidth = html.getboundingclientrect (). width;    // screen width/split block number = reference value   Html.style.fontSize = pagewidth/16 + "px"; // then calculate the REM value of the container so that different screens, the container layout structure will not change. (The entire screen will be divided evenly, then the proportion of the container.) )// when developing CSS, use less to define the @rem variable without using a calculator every time. 

4. Use the background map or img to adjust the corresponding size for different screens:

If the picture size is the same as the container size, you can use width:100%.

If the picture and container size are different, then you need to set the width/height separately for the picture, and the background map to set background-size (x Baserem,y baserem).

When the physical and CSS pixels are not 1:1, the retina screen is magnified, adding pixels to the middle color, resulting in blurring . For images that don't blur, you need to re-create a picture of the total number of pixels for the retina screen.

5. Text to measure line height, then calculate padding (REM)

6. Insert Small icons before text:

Search box: Div.search_box:before (icon) +form input (padding-left)

A tag: A's background (icon) +text-indent (text)

The media property of 7.<link/> only specifies that only the compound condition of the medium style sheet will take effect, but the non-qualifying style sheet will still be downloaded to the client.

8. When the mobile fixed positioning element has input, triggering the keyboard will cause fixed positioning dislocation, can use absolute positioning or jump to other pages to avoid.

Absolute positioning will be Kaka, need to use JS solution, fixed positioning has compatibility issues

9. Common style adjustment

a {    /* Cancel the black matte layer that appears when you press the A label finger */    -webkit-tap-highlight-color:  Transparent;     text-decoration:none;} input {    /* Remove form element fillet in iOS */    -webkit-apperance:none;}

Mobile-side Layouts