webApp
1.屏幕自适应
<meta name="viewport" content="initial-scale = 1,maximum-scale=1, user-scalable=no,width=device-width">
2.Manifest.json文件
它是5+移动App的配置文件,
用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息,
用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。
<link rel="manifest" href="manifest.json">
3.页面重设CSS
/*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; }
4.规则谨记
- 字体用rem,其余所有元素设置均用px。
- 慎用表格。使用ul>li*3来代替。
- 不要使用图片填充屏幕,特别是100%,容易引发意想不到的bug。
- 使用div时切记一条反常理做法:div{width:100%;margin:0 2px},会造成纵向滚动。
- input,img等单标签要闭合。养成良好的习惯。
5.
<!--80%透明度遮罩层 --> <div class="modal-bg"></div>
/**/ .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; }