Mobile development skills and mobile development skills

Mobile development skills and mobile development skills

Opening Speech

Recently, I took over a mobile project. I personally feel that I am doing fast and robust... The most important thing for mobile terminals is that the pages should be applicable to different mobile phone screens and ipad. Here are some tips to help you build your own projects efficiently without relying on any framework.

I. Writing and merging styles by component or partition File

① Set various variables

Using scss or less to write css code has many advantages. This is not detailed here.

The first step we get is to analyze the modules, styles, and colors on each page. In general, the main color of each page should be consistent for the unity of the Style of each page, and some pages will use the same components, such as slider. Therefore, we can first define a constant file that stores variables such as color, height, and width. Define a public style file, for example, to write clear floating styles that may be used by various pages.

In my opinion, scss is better than less. If scss is used for definition, one of the methods is % definition, that is, definition is not compiled, instead, it will be compiled only when it is actually used. Example:

② Subdivided by module

Personally, after dividing by modules, the code readability can be significantly improved to facilitate maintenance, and the number of files introduced to the page is also reduced, which can also improve performance. However, it should be noted that the sub-module File Name should start with "_", so that it will not be compiled, but will be compiled when it needs to be referenced. Example

Ii. Adaptive Page Layout

I personally think that the better layout method for mobile terminals is the percentage + rem layout.

The advantage of a percentage is that the actual size of the same percentage changes with the screen size. For example:

 

In the red box, assume that the current requirement is a line of four sections to adapt to any screen. Then, if ul and li are used to write html and layout, if ul is set to 100% in width, then li is 25% in width, and box-sizing: border-box is set. Under various screens, the four are evenly divided and no horizontal scroll bars appear. However, we should note that we should not use margin-left and margin-right to open the distance at this time, but use padding to open it. The ratio is as obvious as this is. When the degree of segmentation is high, the layout should be based on percentages.

The Code is as follows:

ul{    width:100%;    margin-bottom:10px;｝ul li{    width:25%;    box-sizing:border-box;｝

Why do we need to set box-sizing: border-box? For more information, see http://www.w3school.com.cn/cssref/pr_box-sizing.asp.

The value of rem isOnly. Font-size relative to the root element htmThat is, you only need to set the font-size of the root element, and use the rem unit of other elements to set the corresponding percentage. You can use @ media to write the font-size value of the html element in different sizes. Then something amazing happened. Font when you change the size. Images and so on. It's really nice to use!

Some common adaptive dimensions 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;  }}

For more information, see http://www.cnblogs.com/beidan/p/5275426.html?3382529.

Iii. Common effects

① Slide the page horizontally

One is that we often see that horizontal scrolling is required during some special sale activities and flash sales activities. :

Do not think that this effect involves touch events, but how complicated JavaScript code is to be written. In fact, you can simply implement it with only css. The principle is to use the overflow attribute. Set the horizontal scroll and the vertical direction to hidden.

Of course, we also need to work with some other code.

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 most important thing here is to set the ul width to 100% and float to the left. Set li to display: inline-block.

If you use Google for debugging, you will find that the effect is as follows:

Yes, there will be an obvious scroll bar. However, if you use a real machine or a mobile device, you will find that the scroll bar does not appear. So sometimes it is more reliable to do mobile things.

In addition, pay attention to one problem. Because li is displayed: inline-block., The inline attribute is available. The default value is. This element is displayed as an inline element, and there is no line break before and after the element. In addition, this attribute defines the vertical alignment of the baseline of the element in the row relative to the baseline of the row where the element is located. In short, the baseline alignment of li is aligned by the last line of text by default. Figure:

As can be seen from the figure, since the last li is not supported, and their default method is based on the last line of text, the last li will be "dropped. At this time, we need to set the vertical-align attribute value. Set to vertical-align: middle. For more information, see here. If it is set in this way, there will be no problem. Effect complete !!!

 

Conclusion

It seems that I did not expect anything to say. Let's talk about it first... You can send me a private email if you cannot understand it!

Finally, I wish you a happy Dragon Boat Festival!