General CSS style summary for mobile WebApp development

The HTML page tags I used:

SECTION,DIV,ARTICAL,P,OL,UL,LI,HEADER,FOOTER,SPAN,FORM,INPUT,LABEL,H1,H2,H3, I will not say the details, only to the novice said, why so many labels, Can you solve the whole project with only 16 of them?

The reason is not to think that the label is more, we must use it, we want to use a wide, easy to remember.

What does the block-level element and inline element mean, in a little explanation?

The block-level element is the one that fills his line; the inline element is his multiple peers can be on the same line at the same time.

What do we usually put on the mobile side of the head tag?

title,meta,link,3 labels will be more, explanation please see:

Title: This title of the page, which is usually displayed in the browser when the page is opened, the most address bar can be simple text paragraph above.

Meta:

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

<meta content= "yes" name= "apple-mobile-web-app-capable"/>

<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style"/>

<meta content= "Telephone=no" name= "Format-detection"/>

<meta content= "Email=no" name= "Format-detection"/>

<meta content= "initial-scale=1.0,user-scalable=no,maximum-scale=1" media= "(device-height:568px)" Name= " Viewport "/>

The first meta tag indicates that the width of the document is forced to remain 1:1 with the width of the device, and the maximum width of the document is 1.0, and the user is not allowed to click on the screen to zoom in; User-scalable: Whether the user can manually zoom

The second meta tag is the safari private meta tag in the iphone device, which says: Allow full-screen mode browsing;

The third meta tag is also the iphone's private label, which specifies the style of the iphone's status bar on the top of safari;

The fourth meta tag means: Tell the device to ignore numbers on the page as phone numbers

Fifth META tag: used to ignore the mailing address in a page

The sixth one is the maximum height limit of 568Px, this can be ignored, because we will use sliding to replace, of course, can be used in the page layout is not many places!

Link: Generally just the introduction of CSS files, for import most of the predecessors are not good, and he is generally only written in the CSS file. If we open a newly downloaded to the local page or frame, browse the page is very slow, it is estimated that the CSS inside the introduction of Google files, because our domestic, Google is blocked!

What about JavaScript? (in general, put the introduction file in front of </body>)

Here's how to put the difference between head and </body>2 in a different place:

The head is a common event that requires a user to click or a variety of actions to trigger.

Put in the </body> inside is the user to see before the execution.

Now let's take a look at the CSS problem:

1, I believe that 99% have done 1 projects will understand: RESET.CSS (reset file or COMMON.CSS,BASE.CSS, the name is not the same, the use of the same.) )

I will share my own accumulated good papers this year to write to Common.css inside.

@charset "Utf-8"; Html,body{background: #f0f0f0; color: #505050; font-size:62.5%;-webkit-user-select:none;- Webkit-tap-highlight-color:rgba (0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;- Webkit-touch-callout:none;-webkit-touch-callout:none;} BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,CODE,FORM,FIELDSET,LEGEND,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD, hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;} Body,button,input,select,textarea {font:14px \5b8b\4f53, ' Helvetica Neue ', Arial, ' Liberation Sans ', FreeSans, ' Hiragino Sans GB ', sans-serif\ "Microsoft Yahei" \ "Microsoft Jas Black"; line-height:20px;} h1{font-size:24px;} h2{font-size:22px;} h3{font-size:18px;}    @media only screen and (min-width:360px) {h1{font-size:28px;}    h2{font-size:26px;}    h3{font-size:22px;} Body,button,input,select,textarea {font-size:18px;line-height:26px;}} H1,h2,h3,h4,h5,h6 {font-weight:normal;} HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, H6{-webkit-text-size-adjust:none;} /* Prevent auto-resizing of the font when rotating the screen */textarea{resize:none;} /* Cancel the default style of the button on Inphone */input[type=button]{-webkit-appearance:none;outline:none} input::-webkit-input-placeholder {color: #F0F0F0;} Textarea::-webkit-input-placeholder{color: #F0F0F0;} Input::-webkit-input-speech-button {display:none}table {border-collapse:collapse;border-spacing:0;} th {text-align:inherit;} fieldset,img {border:none;} abbr,acronym {border:none;font-variant:normal;} del {Text-decoration:line-through;} Ol,ul {list-style:none;} caption,th {text-align:left;} Sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup {top:-0.5em;} Sub {bottom:-0.25em;} ins,a,a:hover {text-decoration:none;} A:focus,*:focus {outline:none;}. Clearfix:before,.clearfix:after {content: "";d isplay:table;}. Clearfix:after {Clear:both;overflow:hidden;}. Clearfix {zoom:1;}. clear {Clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}. hide {display:none;}. block {display:block;}. Outl{white-space:normal;word-break:break-all;width:100px;}. Outh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;} /* layout */.fl{float:left;display:inline;}. Fr{float:right;display:inline;}. Cb{clear:both;}. Cl{clear:left;}. Cr{clear:rigth;}. Rel{position:relative;}. Abs{position:absolute;}. Tac{text-align:center;}. Tal{text-align:left;}. Tar{text-align:right;}. Dib{display:inline-block;}. Vab{vertical-align:bottom;}. Vam{vertical-align:middle;}. Vat{vertical-align:top;} /* Grid */.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%; text-align:center;padding:5px 0;}. Grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing: Border-box;box-sizing:border-box}.grid{*zoom:1}.grid:before,.grid:after{display:table;content: ""; line-height:0 }.grid:after{clear:both}.grid{list-style-type:none;padding:0;margin:0}.grid>.grid{clear:none;float:left; Margin:0! important}.wrap{float:left;width:100%}/* Grid *//*flex*/.col{height:100%;d IsplaY:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column;}. row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:- Webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto;}. Flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}. Flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}. Flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;} /*flex*//* container */.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto; Margin-top:44px;-webkit-overflow-scrolling:touch;} /* Tail */header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background: #CCCCCC;} header{top:0;height:44px;} footer{bottom:0;} /* width */.w100p{width:100%}.w20p{width:20%;} /* margin */.m5{margin:5px;}. p5{padding:5px;}. pt5{padding-top:5px;}

　　

Precautions:

1, you use the Display:inline-block browser will have a default margin generated, so if you want a few div into the line and the infinity, then the best way is to use the same direction of floating (float), to solve the margin of a column.

2, after introducing my CSS file, you will find out why I want to make a breakpoint setting on the font (@media), I seriously analyzed, WebApp page due to 320px,360px,480px,3 a different viewport width size of the case of the production, Then the font size must be set accordingly, otherwise you see in the case of 320px the effect is the same as seen under 480px. Note: Fonts are not self-adapting and can only be set up to achieve the desired effect.

3, the icon is also not adaptive, only the picture can be set 100%, so the icon if set 100% will affect the overall layout, the width can be written in img width= "30" so (30 is the width of the picture 30px).

4, in addition to sometimes header,footer is required to fix fixed positioning outside, then the middle to do a container/jacket to him, we need to use the Wrapper/container below the header to put content. This How to set, you can see my CSS file has been set up and includes a case for easy viewing. And can be done with too much content to slide. (on the fixed positioning problem, I have repeatedly tested the results found that in the 2.3 system below the low-end phone is not supported fixed positioning, is a device compatibility problem: Sliding down, fixed will also move with the page, more than 4.0 of the system can support, A relatively good solution is to use iscoll.js; there will be a lag, but it is a good solution for low-end machines. I personally choose to abandon the 2.3 system below the user base, because now the cell phone 1000 yuan can buy more than 4.0 system of mobile phones, so, I have reason to believe that even mobile phones are not willing to replace the general there are 2 cases: 1, no money, 2, it is impossible to become your users; I'm not going to be compatible with ie6-8 like PC Fortunately, the company does not have a specific standard requirements, so I am free to choose, I just need to know this solution is OK, since I give up the low-end machine market, then I will be the latest technology to the layout, so I do not use iscoll.js, directly with the wrapper above me as a jacket on the line.

5, if we need to implement the content 2 edge margin, using padding instead of margin. Because it is set to margin, there will be a blank margin on the left, and the right side is the case of the welt.

6, we do the front page to write the most annoying is the class name, I do not like the use of underscores, so we can define class naming method: Asidecontent. There is also a name for meaning, such as color: red, we can be defined as:. red:color:red; What about modules? We can do this: for example, I recently made a WP phone-style WebApp page project. Everyone should know that he is a color block composition, color, size and so on are different.

My solution is: (in the Sales module, defined as sell)

Sellhead: The content of the head; Sellfoot: The tail of the content;

So the analogy is: sellmain;sellcontent;selltitle;selllist;selltab;sellmenu;sellbtn;sellmsg;sellbanner;sellcol;

I believe you can easily understand the meaning of this in English and the position corresponding to the situation.

7, from the front end of this title, gradually began to popular: oocss to layout css page. What is the meaning? is to use the idea of object-oriented programming to write CSS, because now have less,sass these, CSS can be programmed, our front-end pressure is getting bigger. The main point is the implementation of modularity, code can be reused. For children who do not have the basics of programming, I really don't know what these professional terms are. You can take a look at my explanation below:

(1),. sellcontent{width:200px;height:200px;margin:10px;padding:10px}

Note: Background color, border, fillet these should not be written inside.

(2),. Bg{background: #00CC66}, class= "Sellcontent BG" in the HTML page.

(a), the implementation of the class combination, and these 2 class classes are where to go where, what is required? Of course it is the attribute in him, as long as he needs the attribute can be put together in combination. (no more than 4 combinations in general)

(b), before we write CSS may be encountered in which DIV needs to define those attribute values, and the whole page down to repeat the very much; now I don't need that way, we can use the side-by-side selector:. sellmain,.sellcontent,.selltitle{ border:1px Solid #cccccc}, reducing code duplication, while inheriting the role of selectors we have to pay attention to: a project down, we wrote the page will reach more than 100, if I write UL li{display:inline-block} such words, So if you have Li on each page, he will become an inline element.

So, before we write the page, we must first look at all the pages of the entire project once, the head of the layout, so that there will be no such problems. To fully understand this oocss, it is recommended that you download the bootstrap framework file to see his source code, and the layout of the page case.

8, the distinction between min-width and max-width, English we all understand, but with the words are not necessarily;min-width: The smallest width is how much when you start to perform the following breakpoint layout;max-width : The maximum width is how much time to stop execution of the following breakpoint layout.

For example: min-width:360px and max-width:480px, the following class is only executed between 360px-480px.

Note: Sometimes we do test in Google or Mozilla Firefox, and then put it on the real machine test, we will find that the real machine is sometimes smaller than the viewport width of the browser display 3px-5px.

9, do the head when I often hate is the picture and text alignment; Now I have found a new solution to the case:

(1), you can put this img to him a bottom margin: negative value;

(2), there are 3 attribute values can be selected to use Vertical-align:top/middle/bottom.

10, when we do mobile, usually have a tag click to link to the place will be the system comes with a transparent layer of click Effect, cancel click Highlight:-webkit-tap-highlight-color:rgba (0,0,0,0);- Webkit-tap-highlight-color:transparent;

11, responsive layout and adaptive layout: (The following is only for personal understanding)

(1), responsive layout, my understanding is in the computer, tablet, phone, respectively, have a different page layout .

(2), adaptive layout, my understanding is in the computer, tablet, mobile page layout, just text size, image size will change.

On the computer, using the Flex-wrap:wrap (stretch to wrap) this to layout can be achieved, but on the tablet and the phone is not currently supported by this property.

The best solution I recommend is to use the flex layout. (Just don't use the flex-wrap property.)

Here's a simple example of what I did:

Note: Style.css refers to the Common.css file provided above:

<! DOCTYPE html>
Introduction to the use of CSS3 's animate.css dynamic:
<! DOCTYPE html>
　　
Analyze breakpoints for development:
(1), the domestic market common viewport width is 320px and 360px, like Note2 only 400px; resolution, pixels these words are generally told to designers, our front-end to understand is viewport;
(2), font size: I believe that some children's shoes will think that the browser will adapt to your page font with different screen size and automatically adapt, I tell you, you are wrong!
These font adaptations are artificially set, and I recommend the following:
BODY{FONT:14PX line-height:20px}//Web page overall font to 14PX-based.
H1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
H1{FONT-SIZE:24PX}
H2{FONT-SIZE:22PX}
H3{FONT-SIZE:18PX}
@media only screen and (min-width:360px) {
Body,button,input,select,textarea {font-size:18px;line-height:26px;}
H1{FONT-SIZE:28PX}
H2{FONT-SIZE:26PX}
H3{FONT-SIZE:22PX}
}
(3), Class control analysis:
See above probably also know how to use @media it;
In addition, the first importance of defining the class name is here: because you want to control a class on a 320px or 360px different screen with a style structure that adapts to the screen size!
(4), when we develop, generally to achieve a compatible browser is generally a domestic browser (Apple's browser is the WebKit kernel): uc,qq,360, Baidu, these browsers are domestic use of the largest browser manufacturers, although not the core are the same, but the universal compatibility problem is not many, So we prefer to be compatible with the WebKit kernel.
(5), front-end development performance Optimization (personal summary Recommendations):
One, the individual file size should not exceed 14KB, plug-in not more than 25KB.
Second, the preference to use the font icon, not to use the film, the use of CSS Sprite method. At the same time, the collection of icons will be integrated into a picture and compressed on the site or WebApp images that are not commonly used.
Third, SEO optimization problem: We often write code will often ignore this tag will take the title,alt and so on these can fill in the keywords, this is to be explained, but on the phone side, this seems to be really useless.
Four, css,js in a modular form to do the project, CSS: We can use the @import url (' form.css ') such a form of operation, a number of different CSS to separate the writing, and then introduced one after another, the problem is: @import is the page loaded HTML before loading CSS, So this you have to consider, under what circumstances this document is used well; JavaScript: We can use Sea.js or require.js to operate, there are related tutorials online, you can Baidu or Google a bit.
The use of CDN technology to reduce space resources; For the enterprise, this risk is a bit large, because the mobile phone user's network is poor, the file may not be loaded in a timely manner and so on.
Six, the picture uses PNG8 to achieve the optimization effect.
Seven, less hard to set the image width and height.
Eight, reduce page requests: Css,js, the number of images will have an impact on the request, at the same time, it is important to note that the class combination generally does not exceed 4, more than the best to take a new class name to define the better.
Nine, reduce the number of DOM access, loading more than the impact of access speed.
Ten, do not appear 404 pages, avoid redirection.
Xi. reduce the volume of cookies and set reasonable expiry time.
12. Cache Ajax, submit it in Get mode, and form post.
General CSS style summary for mobile WebApp development