移动端css总结

• meta标签

<!--视口标签-->
<meta content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>

<!--禁止将页面中的一连串数字识别为电话号码或拨号超链接-->
<meta content="telephone=no" name="format-detection"/>

• 字体

body{font-family:Microsoft Yahei,Hiragino Sans GB,Arial,Helvetica;}

• 去除苹果手机按钮自带渐变样式（input的button按钮）

input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 

• 将input或textarea设置为disabled后，在苹果手机上样式将被覆盖

input:disabled, textarea:diabled {
    -webkit-text-fill-color: #000; /* 用来做填充色使用的，如果有设置这个值，则color属性将不生效 */
    -webkit-opacity: 1;
    color: #000;
}

• 去除输入框的内阴影

input,textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

• 去除点击过后的灰色阴影

a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}

• 去除手机点击链接出现的蓝色框

html *{-webkit-tap-highlight-color:rgba(255,255,255,0);}把透明度设置为0即可解决

• 去掉input在手机中自动变成圆角

input {-webkit-appearance:none!important; border-radius:0!important; }

• 750px的导航条在浏览器水平垂直居中

.navbar{ width:100%; height:3rem; background:#fff; max-width:750px; position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; z-index:999;}

• 750px的导航条固定在浏览器底部居中

.navbar { width: 100%; height: 3rem; max-width:750px; background: #fff; position: fixed; top:100%; left: 50%; transform: translate(-50%,-100%); -webkit-transform: translate(-50%,-100%); z-index:999; }

• 750px的导航条固定在浏览器顶部居中

.navbar { width: 100%; height: 3rem; max-width:750px; background: #fff; position: fixed; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); z-index:999; }

• 调用手机摄像头和相册

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

• 只调用相册或者选择文件

 <input type="file" name="file" accept="image/*" >

• 调用摄像头

<input type="file" name="file"  capture="camera">

• 移动端横向滚动时去掉横向滚动条

<div class="slide-box">
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
</div>

<style>
/*注意：子元素不能有float:left属性，不然会出现空白*/
.slide-box { margin-top: 200px; overflow-x: scroll; display: -webkit-box; -webkit-overflow-scrolling: touch; }
.slide-item { width: 200px; height: 200px; border: 1px solid #ccc; margin-right: 30px; background:pink;}
.slide-box::-webkit-scrollbar {width:0;height:0;display: none;}
</style>

• height属性中的calc方法
  父盒子是100%的高度，盒子里面的head部分固定为140px，内容部分始终为剩余的全部高度

height: calc(100% - 140px); /*切记"+或-"两边要有空格 不然不生效*/