Mobile Terminal layout and terminal Layout

Mobile Terminal layout and terminal Layout

1. the scroll bar is on html by default and is moved to the body.

html{   width: 100%;   height: 100%;   overflow: hidden;}body{   width: 100%;   height: 100%;   overflow: auto;}

2. Restore the 1px border of the HD screen

// Because the pixel ratio is enlarged, the zoom ratio can be reduced. If you multiply the value by 1, you can get 1 pxvar pixelRatio = 1/window. devicePixelRatio; // uses js to dynamically set the zoom ratio to document. write ('<meta name = "viewport" content = "width = device-width, initial-scale =' + pixelRatio
+ ', Minimum-scale =' + pixelRatio + ', maximum-scale =' + pixelRatio + '"/> ');

3. Unit of use

The absolute unit of px, which is a fixed value in any case and is misplaced on a screen of different sizes.

% Relative unit, relative to the parent level (itself. If the percentage is not used properly in a place with a definite value (such as a height), deformation may occur.

The relative unit of em, a multiple of the current font size. If the container font size is different, it is troublesome to modify one by one.

The relative unit of rem is only relative to the font size of html (root element). Mobile browsers are compatible with this layout.

Var html = document. getElementsByTagName ('html') [0]; // screen width var pageWidth = html. getBoundingClientRect (). width; // screen width/number of equal parts = reference value html. style. fontSize = pageWidth/16 + "px"; // then calculate the rem value of the container, so that the container layout structure will not change for different screens. (The entire screen will be equally divided, and then the proportion of containers will be calculated .) // When developing css, use less to define the @ rem variable, instead of using a calculator every time.

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

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

If the image and container are of different sizes, you must set the width and height for the image, and set the background-size (x baseRem, y baseRem) for the background image ).

When the physical pixel and css pixel are not, the retina screen is equivalent to amplification, and a median pixel is added,Cause fuzzy. If you want images to be non-blurred and distorted, You need to recreate an image with more pixels for the retina screen.

 

5. The text must measure the row height, and then calculate the padding (rem)

6. Insert a small icon before the text:

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

Tag a: a's background (icon) + text-indent (text)

7. The media attribute of <link/> only specifies that only media style sheets with composite conditions will take effect, but those that do not meet the conditions will still be downloaded to the client.

8. When input is included in the fixed positioning element of the mobile terminal, the keyboard is triggered, which will lead to a fixed positioning dislocation. You can use absolute positioning or jump to another page to avoid this.

Absolute positioning will be stuck, and it needs to be solved using js, fixed positioning with compatibility issues

9. Adjust common styles

A {/* remove the Black Mask Layer that appears when the finger of the tag is pressed */-webkit-tap-highlight-color: transparent; text-decoration: none ;} input {/* remove the form Element rounded corner under IOS */-webkit-apperance: none ;}