WebApp開發經驗

標籤：

1.自適應螢幕

<meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1">

2.重設頁面所有元素

/*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.規則謹記
①字型用rem,其餘所有元素設定均用px。
②慎用表格。使用ul>li*3來代替。
③不要使用圖片填充螢幕，特別是100%，容易引發意想不到的bug。
④使用div時切記一條反常理做法：div{width:100%;margin:0 2px}，會造成縱向滾動。
⑤input，img等單標籤要閉合。養成良好的習慣。
4.模態視窗簡單設計

.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%透明度遮罩層 --> <div class="modal-bg"></div>

今天就先寫這麼多吧。

WebApp開發經驗