Some tips for mobile-side development

Opening words

Recently took over a mobile-side project. Personal feeling is a faster and more robust one ... Mobile is the most important page to apply different mobile screen, ipad and so on. Here are some tips to help you build your project efficiently without relying on any framework.

I. Styles are written and synthesized by component or plate sub-file

① setting various variables

There are many advantages to using SCSS or less to write CSS code. This is not a detailed word.

The first step in getting a plan is to analyze which modules, which styles, and which colors are the same for each page. In general, for each page of the style of unity, the main colors on each page should be consistent, and a number of pages will use some of the same components, such as slider. Therefore, we can first define a constant file, which is specifically stored in the color, height, width and other variables. Define a common style file, such as a clear floating style that can be used for each page.

Personal feeling scss a little better than less, with the SCSS definition, one of the methods is the% definition, which is defined and not compiled, but is actually used when it is compiled. Example diagram:

② Breakdown by module

Personal feeling, according to the module and other subdivision, code readability can be significantly improved, easy to maintain, and the number of pages introduced to reduce, but also improve performance. However, it is important to note that the file name of the submodule should start with "_", so it will not be compiled, but will need to be compiled at the time of reference. Example

Second, the page adaptability layout

Personally, the better layout for the mobile side is the percent +rem layout.

The advantage of percentages is that the true size of the same percentage follows the screen size change. For example, like this:

Red Box there, assuming that now the requirement is a row of 4 plates, adapted to any screen. Then, with Ul,li to write HTML, and then layout, if the width of the written ul is 100%, then Li's width is 25%, then set box-sizing:border-box words. Under various screens, these four blocks are equally divided and do not appear to have horizontal scrollbars. However, it is important to note that this time the spacing is not used margin-left and margin-right to open, but with the padding to open. Just like this, the ratio is obvious, and the height of the plate is suitable for a percentage layout.

The code is as follows:

ul{    width:100%;    Margin-bottom:10px;}ul li{    width:25%;    Box-sizing:border-box;}

Why set Box-sizing:border-box? If you do not understand, you can see here: http://www.w3school.com.cn/cssref/pr_box-sizing.asp.

REM, the value of REM is only. Relative to the font-size of the root element htm, that is, you only need to set the font-size of the roots, and the other elements are set to the corresponding percentages using REM units. You can use @media to write the value of the font-size with the element HTML in different sizes. And then something magical happened. When you change the size, the font. Pictures and so on, will automatically follow suit. It's really cool to use!

Some of the commonly used adaptation sizes are as follows:

@charset "Utf-8"; @media only screen and (max-width:315px) {  html {    font-size:50%!important;  }} @media only screen and (MIN-WIDTH:316PX) {  html {    font-size:62.5%!important;  }} @media only screen and (min-width:640px) {  html {    font-size:125%!important;  }} @media only screen and (min-width:750px) {  html {    font-size:150%!important;  }} @media only screen and (min-width:1242px) {  html {    font-size:187.5%!important;  }}

To learn more, you can refer to this: http://www.cnblogs.com/beidan/p/5275379.html#3382529.

Iii. common practices of some effects

① page plate can slide sideways

One is that we often see, some special selling activities, snapping up activities, the need for a horizontal scrolling situation. ：

Do not think this effect will involve what touch events, to write more complex JS. In fact, only with CSS can be very simple to implement. The principle is to use the overflow attribute. Set its horizontal direction to scroll, hidden the vertical direction.

Of course, there are some other code to match.

The specific CSS code is as follows:

ul.pinxiang-list{        padding:10px;        padding-top:0;        padding-bottom:20px;        width:100%;        Box-sizing:border-box;        Overflow-x:scroll;        Overflow-y:hidden;        White-space:nowrap;        Float:left;}ul.pinxiang-list li{        position:relative;        Display:inline-block;        margin-right:5px;
｝

The main thing here is to set the UL width to 100%, and float to the left. Li to be set to Display:inline-block.

Another is that if you use Google debugging, you will find that the effect is this:

Yes, there is a noticeable scroll bar. But if you use a real machine, that is, when you look at a mobile device, you will find that the scroll bar is not actually appearing. So sometimes do mobile things, still need to test the real machine is more reliable AH.

Also pay attention to a problem, because Li is Display:inline-block. Then there is the inline property, default. This element is displayed as an inline element with no line break before or after the element. Also, this property defines the vertical alignment of the baseline of the element within the row relative to the baseline of the row where the element is located. What do you mean, to put it simply, these Li's default way of baseline lines is aligned with the last line of text. Look at the picture:

As can be seen from the figure, the last Li because there is no picture to prop up, and their default mode is the last line of text as the benchmark, so the last Li "off" down. At this point, we need to set the value of the Vertical-align property. Set to: Vertical-align:middle. Specific usage, you can see here. With this set up, there's no problem. Effect Complete!!!

Some tips for mobile-side development