Mobile terminal screen Adaptive Layout and screen Adaptive Layout

Mobile terminal screen Adaptive Layout and screen Adaptive Layout

1. Technical Points

It is suitable for mobile terminal auto-Scaling to adopt a percentage layout. Note that the percentage of height is based on the parent element.WidthCalculated because the width of the parent element on the Mobile End is sometimes not specified (for example, if the width of the parent element is 100%), the height of the child element is 0.

Therefore, the height of the child element is supported by padding-top or padding-bottom.

At the same time, the height is set to 0 to prevent the font-size or line-height attributes from affecting the height.

2. Example

In this example, three images are displayed in each row. The image width in each column is 33%, and the image spacing is 0.5%.

<! DOCTYPE html> 
Effect: