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; }