The rem,em of WebView's flexible layout

WebView page of the adaptive generally there are two methods, that is, one is the calculation method of JS, and the second is through the CSS media to set up the file mode. Here are the main ways to introduce CSS.

1 Body{2 font-size:16px;3}4 @media only screen and (min-width:360px){5 Body {6 font-size:18px;7}8 }9 @media only screen and (min-width:375px){Ten Body { One font-size:19px; A} - } - @media only screen and (min-width:412px){ the Body { - font-size:21px; -} - }

First, set the reference value

Set the body or HTML datum value font-size:16px; Then follow the above points of the Iphone4,iphone6 and the iphone6s three sub-stalls.

Ii. Selection of units

The following conversions are based on the benchmark 16px, if the size of the ihpne6 measurement of the design, the measured PX value/2/19 can calculate the corresponding value.

1. The way of REM

In rem, it is a standard conversion of the root element (body).

1 <Divclass= "Welcom-login">2             <Divclass= "Logo-login"></Div>3             <Divclass= "Solo"></Div>4 </Div>

. Welcome-login{width:25rem;/*40px (actual width)/+ (body reference) = calculated value Rem*/Height:12.5rem;/*200px (actual width)/+ (body reference) = calculated value Rem*/}. Welcome-login. Logon-login{width:2.5rem;/*40px (actual width)/+ (body reference) = calculated value Rem*/Height:1.25rem;/*20px (actual width)/+ (body reference) = calculated value Rem*/}

Because REM is calculated as the standard of the root element, the conversion of. Logo-login is also divided by the actual value of 16. Regardless of how many layers are nested inside, the PX value measured in the design is divided by the reference value.

2. Em's Way

Need to divide the situation, whether the current element has set the size of font-size.

When Font-size is not set, the width and height of the current element inherit the font-size of the parent element, which is calculated to actually px/the actual font size (px) of the parent element, as in. Welcome-login. The same value as computed in Logn-login.

When you need to set font-size, the conversion of font-size is calculated by dividing the actual size of the parent element, and at this point, the calculation of the widht and height of the element is based on the actual size of the font-size of the current element (PX). As calculated in the following. Welcome-login.

. Welcome-login{font-size:1.5em;/*24px (actual font size)/16 (the actual font size of the parent Element) = value evaluated em*/width:16.666667em;/*400px (actual width)/(body reference) = value evaluated em*/Height:8.333333em;/*200px (actual width)/(body reference) = value evaluated em*/}. Welcome-login. Logo-login{width:1.666667em;/*40px (actual width)/24 (actual font size of parent Element) = value evaluated em*/Height:. 833333em;/*20px (actual width)/24 (actual font size of parent Element) = value evaluated em*/}

The rem,em of WebView's flexible layout