M-End Summary

The mobile side has recently been involved in the development of the project and is now summarized.

In the M-terminal development process, encountered a lot of problems, here to make a summary, I hope everyone in the future development process
As much as possible to avoid similar problems, improve development efficiency and code quality.
First, the layout
1. Beginning of the mobile end
<meta name= "viewport" content= "Width=device-width, initial-scale=1,
minimum-scale=1.0, maximum-scale=1.0 "/>
When writing mobile, the META tag is added to the head tag to create a
A viewport layer, so as to better show the page effect. For example, some cell phone resolution reached
1920*1080, this high resolution in general in the computer large screen appears, then the mobile phone so small, why can reach
1920*1080 such a high resolution? Because his dpi or PPI is high.
Note: Dpid:ots per inch, originally used to measure the density of dots on a print, is that the printer can
The number of points in inches. When the concept of DPI is used on a computer screen, it is called the PPI. PPI and DPI are the same overview
Read, Android prefers to use Dpi,ios compared to using PPI.
1. Units
Dom Layout unit problem, mobile layout and the layout of the PC side is different, on the PC side we are accustomed to using PX settings
Fixed width-to-height values, while the focus of the mobile side is adaptive, so in many places it is used to set percentages or to REM
Set the width height for the unit. Width is generally set as a percentage and the height is set to REM.
Be sure to differentiate between what situations use a fixed size, and under what circumstances the adaptive size is used. Text classes are basically used
Fixed size, picture and background picture class can consider the adaptive size, depending on the actual situation, not clear where
Can communicate with colleagues first, or communicate with the product, be sure to understand the requirements and then write code.
When using REM as a unit, if it is the sublime text editor, you can install a Cssrem plug-in to facilitate self-
The REM units are converted.
2. Flexible layout
The more common layouts on the mobile side are flexible layouts, which are display:box and Boxflex? Use these two properties to
More convenient allocation of child elements within a row; A simple understanding is the ability to divide elements into equal terms.
For example:
2016/3/29 m-end summary of the Markdown editor for Evernote
https://maxiang.io/# 2/6
<ul style= "Display:box" >
<li style= "Box-flex:1" >1</li>
<li style= "Box-flex:2" >2</li>
<li style= "Box-flex:1" >1</li>
</ul>
Combined with the above code, we can understand that when the UL is set as a flexible box, the UL three sub-elements Li will be
Distribution of their respective specific gravity, we can put the UL as Unit 1, and was divided into four equal portions, of which the first and last Li
Each accounted for One-fourth, the middle of Li accounted for One-second.
Display:box compatible notation
Display:-webkit-box;
Display:-moz-box;
Display:-o-box;
Display:-ms-flexbox;
Display:flex;
Display:box compatible notation
-moz-box-flex:1;
-webkit-box-flex:1;
-o-box-flex:1;
-ms-flex:1;
Flex:1;
3.boxsizing layout
boxsizing layouts are better suited for development in adaptive scenarios. More common examples are:
In this case, it is convenient to calculate the frame length into the width of the box model.
4.css3 Property
Mobile support for CSS3 is very good, except that some attributes need to be prefixed. And it is said that the mobile uses the CSS3 sex
Can be higher than css2, so everyone preferred to use the CSS3 attribute, at the same time CSS3 with how convenient also don't need me to say.

Second, JS code
Technology selection: Zepto.js+swiper.js+echarts.js+common.js
1.zepto.js
2016/3/29 m-end summary of the Markdown editor for Evernote
https://maxiang.io/# 4/6
Zepto is a lightweight JavaScript library for modern advanced browsers, which has a similar API to jquery. Such as
If you use jquery, you'll also use Zepto.
As Zepto himself said, it is just a lightweight JS library, so some of the JQ methods that we commonly use may not
Provided, especially animate animations, of course, this is not particularly important, most animations can be directly used CSS3
Animation to achieve, a small number of demand for animation, you can use the native JS self-defined.
2.swiper.js
Swiper is an open-source touch-slip plug-in developed specifically for mobile, to meet most of the sliding effects on the mobile side
Demand. And Swiper provides a plug-in that is based on zepto development, which is lighter in weight. The use of Swiper is also more convenient, basic
Here's how to quote:
var swiper = new Swiper (". Swiper-container", {
Slidesperview:3,
Setwrappersize:true
});
Swiper Common APIs:
(1) Slidesperview set the number of elements displayed in a screen
(2) Setwrappersize set Swiper automatically calculates the total length of the object
(3) Direction setting horizontal or vertical display
(4) Pagination set small icon
3.echarts.js 3.0
Echarts supports mobile charts starting from version 3.0.
4.common.js
Simply enumerate some of the methods in Common.js:
(1) common.backtop () Return top button effect
(2) Common.divselect (divselectid,inputselectid,height) analog pull-down form
(3) common.touchlist (content,num) call Swiper, left and right slide effect
(4) Common.ajax (method, type, params, callback) general methods for asynchronous requests
(5) Common.getdate (data) generates time based on timestamp (seconds) 1436412956699 > 20150709 12:00
5.Js Code Specification
Each write a new JS method, should write good comments, form such as:
2016/3/29 m-end summary of the Markdown editor for Evernote
https://maxiang.io/# 5/6
For each event, it is best to simply write a comment, such as:
6. How to get and render data asynchronously
var example = function () {
Defines an object
}
(1) method entry, for example:
2016/3/29 m-end summary of the Markdown editor for Evernote
https://maxiang.io/# 6/6
House:function () {
var n = 1,
Nickname,
typeID
Nickname = $ (". Nickname"). Text ();
typeID = $ (". typeID"). Val ();
Calling a method that sends an asynchronous request
Example.sendhouse ();
In addition to invoking the request method, you can also write some related operation events here, such as clicking Load More
$ (". Btn-more"). Click (function () {
n++;
Example.sendhouse ();
})
}
(2) Send an asynchronous request, for example:
Sendhouse:function (Nickname,typeid,pageindex) {
Calling a generic asynchronous request method
Common.ajax ("Image.s.list", "post", {buildnickname:nickname| | Bl
SD ", typeid:typeid| |" 0 ", pagesize:pagesize| |" 5 ", Pageindex:pageinde
x| | " 0 ", Requrl:" http://192.168.100.101:8088 "},function (res,success) {
if (Example.loadhouseinfo && res[success]) {
Example.loadhouseinfo (res[success]);
}else{
Console.log ("No function call provided ...");
}
})
}

Dabigatran 474471759 AC

M-End Summary