webApp开发

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;

  }