app项目经验总结

我写app的10条小经验：

1、关于整体布局：app项目可以不使用bootstrap，不使用jquery mobile等框架，直接当作普通的pc端来写，但是一定要注意响应式布局，因为手机的尺寸实在太多，必须要保证各种分辨率下都要能够正常显示。
     所以，要多用百分比等相对单位，少用浮动，先打好脚手架，保证整体布局在页面放大缩小后不会乱。

修改：app项目的布局还是用bootstrap，为了提高开发效率和协同开发时样式的一致性（比如按钮，大家都用class=”btn”,样式统一）。

补充：页面整体布局可以使用table，起码可以保证一点，不容易错位！

2、关于文本域的问题：app好多地方是要用到文本域（textarea），但是同时又要求高度可以自适应，这时候就只能通过div（contenteditable）来模拟，js来控制字数。

3、关于文本显示问题：因为app特点是区域很小，静态页面是一个展示完好的样式，但是后台因为业务需要，很可能会添加大量的文字、图片，这时候很可能就都乱掉了。反之，静态页面上的少量数据，在实际业务中也可能删除掉了，也要保证可以正常显示（这是高度不能只靠内容撑起来，还有有heigtht/min-hieght）。
     所以，写静态页面时也要考虑，图片框高度自适应，文本显示框（hight：auto；min-height：xxx；），超出范围处理（text-overflow：ellipsis）.

4、所有的app都不要头部（header），因为app有自带的头部，所以不管ui的头部样式设计多好看，不去写它，头部如果存在一些功能按钮（ui未必知道这些），全部移到页面上（为避免影响整体布局，可以改为浮动按钮，或可贴边显示）。

5、关于字体，颜色：各个页面字体样式一定要统一，app字体一般都是微软雅黑，字号14，一些地方大小可做适当调整，一般不用#000黑色，用#333/#666替代，背景边框灰色一般用#ddd/#fefefe，标题加粗，表单元素的placehoder属性统一设置（为了美观，设置比浏览器默认颜色再浅一点）：

 ::-webkit-input-placeholder { /* WebKit browsers */
            color:    #aaa;
            font-weight: normal;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    #aaa;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    #aaa;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color:    #aaa;
        }

6、页面之间的跳转和传值：这个前端最好不要写，因为后端在开发时都要改掉，写这些js功能还不如直接写死传值后的样式。为了不影响a链接的跳转功能和默认样式，统一设置：

href="###"
或href="javascript:;"
或href="javascript:void(0)"

7、下拉框和弹出菜单：下拉框可以统一使用slideToggle()，弹出框样式风格要统一，切换按钮统一使用witch toggle，input输入框的日历图片，和input位置的其他缩略图统一设为背景图（注意：必须给个高度，否则一旦input输入框的值被清除，背景图只能显示一部分，而且在电脑上面还显示不了，只有app能见到问题）

8、按钮的居中显示：全部用margin：0 auto；不要使用position:absolute/relative配合left/right偏移，否则各分辨率的手机下显示位置有问题。

9、关于插件：上传图片带预览效果、名单通讯录、点击查看大图、操作失败提示框（art.dialog）….这些不要自己写，因为自己写了很烦琐，样式可能也不够完美，而且可能会存在很多bug，这些功能最好使用成熟的插件（app日历若只需显示年月日，则用html5自带的type=“date”就行，pc端要用日历插件，注意功能，是否需要显示时分秒）。

10、考虑手机的特殊性，界面小，一些小按钮是不方便点击的，所以要设置成点击某一大块区域都可以触发该单击事件，比如改成点击该整行都可以选中按钮。有些弹出框，要能够实现点击屏幕任意地方都能被关闭。

其他，用户体验：自己写完静态页面，发到手机上测试，看看还有哪些需要完善的地方（从各种角度找问题，务必追求样式细节做到极致，完美在完美！）

补充：如果可能，使用jQuery mobile来实现ui，用zeptoJs来实现功能逻辑，也许会使得app更加完美。

一句话来结尾，做出来的页面是一个让人赏心悦目的艺术品，而不是让人吐槽的残次品！

app所有页面通用css样式：

@CHARSET "UTF-8";
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
fieldset,img{ border: 0; }
:focus{ outline: 0; }
address,caption,cite,code,dfn,em,th,var,optgroup{ font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; }
abbr,acronym{ border: 0; font-variant: normal; }
code,kbd,samp,tt{ font-size: 100%; }
input,button,textarea,select{ *font-size: 100%; border:none;}
body{ background:#fff; color:#5e5e5e; font: 14px/2em Microsoft YaHei,SimSun,Arial;}
ol,ul{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th{ text-align: left; }
sup,sub{ font-size: 100%; vertical-align: baseline; }
:link, :visited, ins{ text-decoration: none; }
blockquote,q{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
a:link, a:visited{color:#5e5e5e;}
a:hover { color:#4399b4;text-decoration:none;}
a:active { color: #666;}
.clearfix:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.l{float:left;}
.r{float:right;}
.clear{ height:0; overflow:hidden; clear:both}
.hide{display:none;}
.btn.hide{display:none;}
a.hidefocus { outline: none; }
button.hidefocus::-moz-focus-inner { border:none; }
a:focus {outline:none;-moz-outline:none;}
input,textarea {outline:none;}
h2 { font-size: 20px; }
h3 { font-size: 16px; line-height: 32px; }
h5 { font-size: 14px; line-height: 28px; }
select,select option{cursor:pointer;}
td{word-break:break-all; word-wrap:break-word;}
.l{float:left;}
.r{float:right;}
.inline{display:inline-block;}
.gray{background:#ebebeb;}
input.checkbox, input.radio{cursor:pointer;}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #aaa;
    font-weight: normal;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #aaa;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #aaa;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #aaa;
}
input[type="radio"]{cursor:pointer;}
input[type="checkbox"]{cursor:pointer;margin-top:8px;}
.table-border{border:1px solid #ddd;}
.table-noborder>tbody>tr>td, .table-noborder>tbody>tr>th, .table-noborder>tfoot>tr>td, .table-noborder>tfoot>tr>th, .table-noborder>thead>tr>td, .table-noborder>thead>tr>th{border:0;}
a.btn-blue{background:#18b7fa;color:#fff;}
a.btn-yellow{background:#ff9624;color:#fff;}
a.btn-blue:hover, a.btn-yellow:hover,a.btn-red:hover{color:#fff;}

小白写的不对或者不全，欢迎您的斧正和补充。


谢谢阅读！