Small accumulation of mobile development

Due to the company's development needs, I was arranged to the mobile station to do the front-end, talking about the development of mobile, for me to trace back to my 2011 years of contact, but at that time is to do app development, and now the mobile Web development is quite different. Doing mobile development is also my work plan for this year. In a way, I am grateful to my leadership for giving me this opportunity and trust in me.

For our company in the mobile web side of the front and back of the development are from the zero, all aspects of the technical architecture is not enough system comprehensive, but also because of such a company, it can give every technology, a self-learning to improve and breakthrough platform. How to improve the imperfect things, this is your growth in this piece, the company's business has been developed.

In the first one months, in order to catch the World Cup before the opening of a related business. The company has set up a project team to work overtime to make sure that the product is born in that time node. As a result, we finished it on time, but it was also a little bit imperfect.

In this project I personally learned a lot of things, although these things in most of the students who have been mobile development in the eyes may be earlier than the new technology. But for me or for the first time to develop the mobile web of new birds, these things such as the Oasis of rain, for the technology can be learned every day to learn something that they do not know, really from the heart of happiness. Let me tell you about some of the more superficial things I learned, we saw the knowledge to praise, did not learn to shoot bricks, can throw the iphone, I received all.

I remember when I made the first mobile page, I found that my page can use the browser's default touch gestures to zoom in and out of the page, the product manager will not do, or die to let the page have this default zoom function. Did not do Ah, who called himself not a product manager Bai, he had to Google.

<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name= "viewport" >

The result is to add the above code to the head. Some of the settings in the property of people in English a better look on the understanding is what it means, but if you want to know more deeply, we will Google, Baidu.

You know more or less that some browsers bring a UI style. I met a more prominent is the default style of the Submit button on the iphone, unlike our designer, the designer is not happy. So in order to beat sister a smile, we go to find Mr. Google. The results are as follows

. subtn{   -webkit-appearance:none;   -moz-appearance:    none;   Appearance:         None}

The original browser also has appearance this property, this property is quite powerful, but the default style of each browser varies greatly. Read more about changing the appearance of elements using the Appearance property of CSS3 to learn more.

The following situation has been almost met with mobile web development, that is, when you click on a link or a clickable element defined by JavaScript, it will appear with a translucent gray background. However, most of the cases I do not need this highlight. Solution:

. Nav_a{-webkit-tap-highlight-color:rgba (0,0,0,0);}

This key is at the last value of 0, meaning that the alpha value of the color is 0. More advanced properties for CSS3

Do the site of course, the use of icons. Now abroad is now very popular to convert the icon to Web fonts, the domestic part of the site is also useful, although it has its advantages, but these also have shortcomings, the label must be a solid color and so on. My main point here is to use the picture as icon, the picture becomes very virtual. If there is a problem, there is a way to solve it:

. m_okhqb_header. dib {Width:35px;height:30px;background:url (http://s2.hqbcdn.com/mobile/v0/images/icons/sp_icos_ 2.png) no-repeat 0 2px;
background-size:50px Auto;}

The focus of the above CSS is sp_icos_2.png than the actual picture is one times, and then through the background-size to set it to half of its size, but as to whether it must be set to the size of its half, we can try.

The following describes the CSS properties of the three related layouts, which is quite practical.

Box-sizing Property

The Box-sizing property allows you to define specific elements that match a region in a specific way.
Box-sizing has three attribute values of Content-box,border-box,inherit. Here I'll focus on Border-box.

When the Box-sizing property value is Border-box, the width and height of the content are obtained by subtracting the border and padding from the set width and height respectively. Look at the following CSS code:

. box {box-sizing:border-box;-moz-box-sizing:border-box;/* Firefox */-webkit-box-sizing:border-box;/* Safari */width : 200px;        height:100px;float:left;padding:50px 50px 0;}

This CSS indicates that the total width of the elements of Box is 200px, the left and right padding is 100px, and the content width of this element asks 100px. I do not know whether people can understand, do not understand the words to try it yourself. If you don't know more, you can click on the CSS3 box-sizing property to learn more. You may be asked what the effect is, it is very useful when the mobile station's responsive layout is often unaware of the width.

Box-flex Property

The Box-flex property specifies whether the child elements of the box can scale their dimensions. (A retractable element can be abbreviated or enlarged as the box shrinks or expands.) As long as there is extra space in the box, the expandable elements expand to fill the space. ）

<! DOCTYPE html>
When using this CSS property, be sure to set the Display:box on its parent element (this is the. box); Of course, the browser does not yet support this property, all must take the private prefix (-webkit,-moz ... ）。 This property is also very useful now on the mobile side, especially when the layout is split evenly. Learn more about the CSS3 Box-flex properties
Display:table and Display:table-cell
The first one indicates that this element is displayed as a block-level table (like <table>) with a newline character before and after the table.
The second means: This element is displayed as a table cell (similar to <td> and <th>)
These two combine to use, can element class is the layout of the table. On the mobile side these two should be used on the same frequency is pretty high.
The layout of the role, here is not good how to explain, we can try in the actual layout, to realize the beauty of it.
Well, also wrote so much, this is what I learned in the past one months, some of the knowledge points, share to everyone, I hope the new contact with mobile Web development students have a little bit of help. Mobile on the technology is not easier than on the PC, on the contrary, I think the mobile side to learn a lot. Rarely become more, dripping stone wear, hope that they can move this piece has its own achievements. Still welcome everyone to exchange discussions, improve the progress of others, but also their own progress!!!