WebApp Development Experience

1. Adaptive screen

<meta name= "viewport" id= "viewport" content= "width = device-width, Initial-scale = 1, Minimum-scale = 1, Maximum-scale = 1" >

2. Reset all elements of the page

/*reset*/ HTML { -webkit-text-size-adjust:none; -webkit-touch-callout:none; -webkit-user-select:none; Word-break:break-all; height:100%; font-size:62.5%; Color: #999; } Body, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, pre, Code, form, FieldSet, Legend, textarea, p, blockquote, Th, TD, HR, button, article, aside, details, figcaption, figure, Footer, header, menu, nav, section { margin:0; padding:0; } Article, aside, details, figcaption, figure, Footer, header, menu, nav, section { Display:block; } Audio, canvas, video { Display:inline-block; } Body, button, input, select, textarea { font:400 1.2rem/1.2 "Hiragino Sans GB W3", "Hiragino Sans GB", Simhei,sans-serif; } A, input, button, select, textarea { -webkit-tap-highlight-color:transparent; } TEXTAREA { Resize:none; Overflow-y: auto; } IMG { border:0; Vertical-align:middle; padding:0; margin:0; } iframe { Display:block; } del { Text-decoration:line-through; } UL { List-style:none; } OL { List-style-position:inside; } H1, H2, H3, H4, H5, h6 { font-weight:500; } Sub, SUP { font-size:75%; line-height:0; position:relative; Vertical-align:baseline; } sup { Top: -0.5em; } Sub { Bottom: -0.25em; } A Text-decoration:none; Color: #999; } Input,textarea,button{outline:none} Table { Border-collapse:collapse; border-spacing:0; } Textarea::-webkit-input-placeholder { Color: #ccc!important; }

3. The rules bear in mind
① font with REM, all other elements are set with PX.
② use the form carefully. Use Ul>li*3 instead.
③ do not use pictures to fill the screen, especially 100%, easy to trigger unexpected bugs.
④ using DIV is an anti-commonsense practice: div{width:100%;margin:0 2PX}, will cause vertical scrolling.
⑤input,img and other single labels to be closed. Develop a good habit.
4. Modal Window simple design

. modal-bg{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:20; Background-color:black; Filter:alpha (opacity=80); -moz-opacity:0.8; opacity:0.8; Display:none; } <!--80% opacity mask Layer-- <div class= "MODAL-BG" ></div>

Let's write so much today.

WebApp Development Experience