This issue introduces you to the mobile-side layout. Usually write, some in percent, some with REM to do, but regardless of which, need to understand the flex flexible box layout, into the topic:
Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.
Let's start with an easy-to-understand and practical example:
This picture, for example, is a list page for a product with three rows. So, we can give a line of three div package a large box, three items each div must add a class, on the code
<Divclass= "Dis-box"> <Divclass= "Box-flex"> <Divclass=""> <imgclass=""src=""> </Div> <Divclass="">Product Name</Div> <Pclass="">Price</P> </Div>
<DivClass= "Box-flex"><DivClass=""><ImgClass=""Src=""></Div><DivClass=""> Product Name</Div><PClass=""> Price</P></Div>
<DivClass= "Box-flex">
<DivClass="">
<ImgClass=""Src="">
</div>
<div class= "" > product name </div>
<p class=" "> Price </p>
</div>
</div>
< Span style= "COLOR: #0000ff" > < Span style= "COLOR: #0000ff" > < Span style= "COLOR: #ff0000" > < Span style= "COLOR: #800000" >css:
/*flex*/
. dis-box{display:box;display:-webkit-box;display:-moz-box;width:100%;}
. box-flex{box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;width:100%;}
Mobile Development (ii) (Beginner's entry)