9,12 Mobile Web

Mobile web because of its relatively convenient internet access, by the major companies to promote the market share even more than the PC end, so the front-end developers need not only do a good job of PC-side development, but also to do mobile development.
Mobile market share from high to Low browser has: UC. qq.baidu.360. Cheetah Sogou. Opera, which in addition to opera has its own kernel, other browsers are used by the WebKit kernel, so we develop mobile side only consider WebKit, so H5 and C3 can play its role, basically do not consider compatibility, of course, Large sites still have to be considered compatible. There are some browsers, Firefox.ie.windowphone installed capacity is very low
Mobile is basically a lot of devices are used Retina screen, that is, retina screen equipment, the market is more than 2x devices and 3x devices, 2x equipment is 4 points when a point, 3x device is 9 points when a point, in order to let the naked eye can not see the pixel particles, to provide a better user experience, such as 4s is the 2x device , the screen resolution is 640*960, but the physical resolution, the display content is based on the resolution of 320*480, the device was launched by Jobs, the first to use on 4s
Viewport is the viewport size of the mobile side, that is, the size of the content area you can see
META:VP + TAB can be played out <meta name= "viewport" content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ">
Width: Set widths, no need for px,device-width to automatically adapt to screen
User-scalable: Whether it is just scaling, optional value Yes No also can write 1 (yes) 0 (NO)
initial-scale=1.0 the default viewport scaling size, the general setting is 1.0 does not scale
Maximum-scale Maximum zoom ratio (zoom to 1 o'clock, without setting)
Minimum-scale Minimum zoom ratio (zoom to 1 o'clock, no setting)
Height: High (basic no, content will be large page)
When we develop, we usually set the maximum width and the minimum width max-width:640px;min-width:320px;

At the time of development, the common format needs to be written
*,
:: Before,
:: After {
margin:0;
padding:0;
/* Remove the default finger click Highlighting on the mobile side transparent transparent */
-webkit-tap-highlight-color:transparent;

/* Add box model in order to prioritize the size of the box */
-webkit-box-sizing:border-box;
Box-sizing:border-box;
}
a{
Text-decoration:none;

}
ul,ol{
List-style:none;
}
/* The mobile side will take out his four-week frame */
input{
Border:none;
Outline:none;
/* Some mobile browsers will have default 3d effects such as shadows, 3d gradients */
-webkit-appearance:none;
}
. Clearfix::before,
. clearfix::after{
Content: ";
Display:block;
height:0;
line-height:0;
Visibility:hidden;
Clear:both;
}

To improve development efficiency, you can set the following methods
Floating:
. f_left{
Float:left;
}
. f_right{
Float:right;
}
Set margin:
. m_l10{
margin-left:10px;
}
. m_r10{
margin-right:10px;
}
. m_b10{
margin-bottom:10px;
}
. m_t10{
margin-top:10px;
}
Set border:
. b_l{
border-left:1px solid #eee;
}
. b_t{
border-top:1px solid #eee;
}

. b_b{
border-bottom:1px solid #eee;
}

. b_r{
border-right:1px solid #eee;
}
When you need to use it, add the corresponding class directly

The corresponding code snippet can be encapsulated in the sublime
tool--new Code Snippet--
<snippet>
<content><! [cdata[write the corresponding code here
]]></content>
<tabTrigger> write the character of the extraction code snippet here </tabTrigger>
</snippet>

9,12 Mobile Web