移动端 CSS 常用小结

原移动端 CSS 常用小结

您目前处于：笔记 2017-07-13

乔淑夷作者

乔淑夷，从事京麦工作台前端架构及开发工作，熟练运用h5，css3，js，jquery等前端技术，熟悉vue，angular等开源框架。

Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

移动端页面添加 meta 标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。

禁止 iOS 自动识别电话和 Android 自动识别邮箱

<meta name="format-detection" content="telephone=no"/>  
<meta name="format-detection" content=“email=no"/>

禁止文本选择

-webkit-user-select:none

屏蔽输入框阴影，去掉按钮默认样式

-webkit-appearance:none

border-box

想要设置一个宽度100%的元素，又要设置元素固定的 padding-left 或 padding-right，还有边框，就会出现水平滚动条，可以用 box-sizing 来解决。

*, *:before, *:after {  
  -webkit-tap-highlight-color: transparent;  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  -ms-box-sizing: border-box;  
  box-sizing: border-box;  
}

css3 多行文本换行

overflow : hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;

字体不换行，溢出省略号

width:300px;  
white-space: nowrap;  
text-overflow:ellipsis;   
overflow:hidden;

清除浮动

.clearfix:after {  
  content: ".";  
  display: block;  
  height: 0;  
  visibility: hidden;  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}

表格内容自动换行

table-layout :fixed;word-break: break-all;word-wrap :break-word;

iOS 快速回弹

在 iOS 上如果想让一个元素拥有像 Native 的滚动效果，可以这样写

overflow-y: scroll;  
-webkit-overflow-scrolling: touch;

css3 元素居中

position: absolute;  
top: 50%;  
left: 50%;  
-ms-transform: translate3d(-50%,-50%,0);/*IE9*/  
-moz-transform: translate3d(-50%,-50%,0);/*Firefox*/  
-webkit-transform: translate3d(-50%,-50%,0);/*Safari and Chrome*/  
-o-transform: translate3d(-50%,-50%,0);/*Opera*/  
transform: translate3d(-50%,-50%,0);

position: absolute;  
top: 50%;  
left: 50%;  
-ms-transform: translate(-50%,-50%);/*IE9*/  
-moz-transform: translate(-50%,-50%);/*Firefox*/  
-webkit-transform:translate(-50%,-50%);/*Safari and Chrome*/  
-o-transform: translate(-50%,-50%);/*Opera*/  
transform: translate(-50%,-50%);