Tips for moving the end

I. Basic SKILLS
1. Do the mobile end, use percent
2. Flexible box Display:box provided by CSS3
Concept: This is provided by CSS3, specifically designed for the mobile side;
Use: Set Display:box in parent element, set box-flex:1 in child element
(Can be set to another number, such as set to 2, which means setting the child element
The remaining space occupies 2 equal portions of space), so that the parent element is removed
The remaining space for all child element content.

Display:block and Box-flex:2 when set, different browsers have different prefixes,
Display:-webkit-box; Chrome browser
Display:-moz-box; Firefox browser

-webkit-box-flex:1;
-moz-box-flex:1;
Box-flex:1;

Example: <div class= "NAV" >
<div class= "left" >11111111111111</div>
<div class= "center" >2222222222222222222222</div>
<div class= "right" ></div>
</div>

CSS style:
<style>
. nav{
Display:-webkit-box; Chrome browser
Display:-moz-box; Firefox browser
Display:box;
}
. Nav div{
height:200px;

}
. left{
-webkit-box-flex:1; 1 of the left accounted for 3 equal parts
-moz-box-flex:1;
Box-flex:1;
border:1px solid red;
}
. center{
-webkit-box-flex:1; 1 of the 3 equal parts of the center
-moz-box-flex:1;
Box-flex:1;
BORDER:1PX solid blue;
}
. right{
-webkit-box-flex:1; Make right 1 of the 3 equal parts
-moz-box-flex:1;
Box-flex:1;
border:1px solid Green;
}

</style>

3. EM units
EM, like PX, are the units used to set the size or spacing of an element, but the PX represents the pixel units, and
EM is a relative unit, which is a unit relative to the font size of the current element, if the element
itself does not set its own font size, it inherits the parent element's font size, if its parent
Also does not set the font size, it will inherit the browser font size;

Note: EM affects the size of the element and its child elements, without affecting the size of the parent element

For example: The current element has a font size of 20px, then 1em=20px; if the current element's Word
The body size is 30px, so the current element is 1em=30px; so em is relative
A unit of font size for the current element.

div{
font-size:20px;
Width:10em;
Height:20em;
border: (1/20) em solid red;
}
Description: The width of this div is 10*20=200px, the height is 20*20=400px,
Border is 0.05px solid red;

4. REM Units
REM root em is similar, are all conversion units, but rem and EM conversion when the relative element is not the same, and REM is
CSS3 provides, if REM is used as a conversion unit, then the conversion of all elements under that element
Units are not affected by the font size of the current element, but are converted based on the font size of the root element.
The root element is usually HTML or browser, the browser font size defaults to 16px;

Two. Mobile-side frame
Zeptojs is similar to the jquery framework, but it has a sliding-effect package
Hammerjs special gesture of JS
Jquerymobile the framework developed for the mobile side

Three. Jquerymobil
Concept: Jquerymobil is a framework designed for mobile development, and it can be said to be a mobile side of jquery

Three core files that must be imported when using:
1. Jquerymobile-1.4.5.min.css This is the core CSS file that is imported into the head of HTML
2. jquery.min.js jquery js file, after importing body tag
3. Jquerymobile-1.4.5.min.js then the core JS file, after importing Jquery.js

Application: After importing the above three core files, we can start the development of our mobile terminal.

<div class= "page" id= "Page1" >
<div class= "Header" >
Head
</div>
<div class= "Content" >
Intermediate content
</div>
<div class= "Footer" >
Tail
</div>
</div>

Description: 1. The above three class names are jquerymobile set class names, we can not arbitrarily change,
We can set the div ID or other attributes to distinguish them;

2. We know that on the mobile side (such as mobile phones), the screen presents us with only one page,
So here you can explain that there are multiple pages in a page, but the screen will only
Show us the content of a page, so what is the
Page jumps to each other or different HTML file pages to each other? There are many ways,
such as a tag and so on, but we need to know, in the Jquerymobile page of the jump
is to use Ajax to achieve the jump.

Page: This is a parent element that represents a page that can have multiple pages in an HTML;
When more than one page is set, we can set a tab to jump to another
Page pages (to jump through Ajax)

Header: Head, is the jquerymobile definition of the head, we can not arbitrarily change

Content: The middle Content section, which is defined by Jquerymobile, cannot be changed arbitrarily.

Footer: Tail, is the tail of the definition of jquerymobile, we can not arbitrarily change

Four. Properties of the Jquerymobile
Data-ajax= "true" using AJAX to load
Data-ajax= "false" does not use AJAX to load
data-role= "dialog" causes the page to load in the form of a popup box
data-role= "button" to make a label a button
Data-inline= "true" to narrow the button width (button is a block-level element in Jquerymobile, which is set to inline element)
Data-role= "Back" fallback button, can only be used for a tag, from which page to jump in, fall back to which page

Tips for moving the end