H5移动端开发相关内容

1、给页面定义最大和最小宽度

{
    max-width:640px;
    min-width:320px;
}

2、去掉a、input标签在浏览器中的默认样式

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

/* 流畅滚动 */
body{
    -webkit-overflow-scrolling:touch;
}

3、css控制字体的个数，超出显示省略号

{
    /*必须指定字符串的宽度*/
    width:300px;   
    overflow: hidden;  
    /* 当字符串超过规定长度，显示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;   
}

4、calc 的兼容效果不是特别好，浏览器支持有限，不推荐使用

#formbox {
  width:  130px;
  /*加厂商前缀，操作符（+，-，*，/）两边要有空格）*/               
  width:  -moz-calc(100% / 6);   
  width:  -webkit-calc(100% / 6);   
  width:  calc(100% / 6);   
  border: 1px solid black;
  padding: 4px;
}

5、 垂直居中

/* html */
 <div class="parent-div">
     <div class="child-div"></div>
 </div>

/* css */
.parent-div{
            width: 100px;
            height: 100px;
            background-color:red;
            position:relative;
        }
        .child-div{
            width:50px;
            height:50px;
            background-color:#000;
            position: absolute;
            margin:auto;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }

6、字体的上下空白间距， line-height设置为100%可以消除上下的空白间距

.font-div {
    font-size: 188px;
    line-height: 100%;
}
/* 空白间距 = line-height - font-size */
/* line-height： normal 默认， 设置合理的行间距 */

7、 flex

{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
 }