Mobile-side Layouts

Page layout → commonly known as building page structure (HTML) and adding page styles (CSS)

With the development of HTML5 and CSS3, page layout is becoming more and more complex, but it can be more and more beautiful.

With the development of technology layout is divided into: PC-side layout and mobile-side layout

PC-side layout of the difficulty is to be compatible with each browser →chrome FF IE 6 7 8, the most annoying is IE, the specific problems themselves can Baidu

The mobile side does not need to be compatible with each browser, only one kernel browser-webkit-on the mobile side but needs to be compatible with each size

There are many different sizes:
Apple 4-8 has 320 375 414 etc. these are the sizes of the different widths of the Apple phone
Android size 320-640 range,
There are also a number of other homemade machine sizes that are surprisingly large and 1024 size

Pages to adapt to these wide range of devices, there are many techniques, mainly about the elastic layout and the REM layout

Elastic layout: Equivalent to being added to a property by the parent, then he is equivalent to a container that can be widened and narrowed, and then you can put something inside

Elastic box:
Parent level:
Display:-webkit-box; (Parent becomes elastic box)
Sub-level:
-webkit-box-flex:1, (own how much score, score specific how to divide Baidu)

Then there are some properties:
Direction:
-webkit-box-orient:vertical;
Horizontal:-> min. width
Vertical:-→ height

Arrangement Method:
-webkit-box-direction:reverse; Row backwards.

Horizontal arrangement:
-webkit-box-pack:center;
Vertical arrangement:
-webkit-box-align:center;
There are properties that let the child elements be centered horizontally, vertically centered, horizontally vertically centered, and so on.

There are several points to note about flexible layouts:
* Elasticity can only be added to the parent, meaning that you want those elements to be arranged together to give it a parent elasticity
* with elasticity, the child can not float, this to remember the maintenance is very important.

Positioning and elasticity can not be a

One more thing: The mobile page has to add a few meta tags
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0,maximum-scale=1.0, user-
Scalable=0 ">
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >

Specifically why add Baidu, it is possible to find more meta tags, but also according to the specific circumstances of their own add

————————————————————————————————————————————————
REM layout
The way to calculate by relying on the root element is to give the HTML element a font-size first, and then all of our REM is based on this font-
Size to calculate
For example: html{font-size:16px;} so 1rem=16px to calculate, the browser default is 16px, turn into px more trouble so you can
Set to html{font-size=62.5% is the default 10px font size} But the browser is 12px, less than 12px will do 12px to calculate all
Can use JS dynamic to set
<script type= "Text/javascript" >
(function (Win,doc) {
function Change () {
Doc.documentelement.style.fontsize=m (font size) *doc.documentelement.clientwidth/n (
Width of the design chart) + ' px ';
}
Change ();
win.addeventlistener= (' resize ', change,false);
}) (Window,document)
</script>

How to display different widths under different sizes, depending on the width of the design draft, if the design is 320, it can be the font size is 20,px conversion
REM is PX/20.

————————————————————————————————————————————————
and fluid layout, and so messy (time to say)

Mobile-side Layouts