总结 | 移动端 CSS 常用小结

Meta 标签

1	<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 自动识别邮箱

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

禁止文本选择

1	-webkit-user-select:none

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

1	-webkit-appearance:none

border-box

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

1 2 3 4 5 6 7

*, *: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 多行文本换行

1 2 3 4 5

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

字体不换行，溢出省略号

1 2 3 4

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

清除浮动

1 2 3 4 5 6 7 8 9 10

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

表格内容自动换行

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

iOS 快速回弹

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

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

css3 元素居中

3d

1 2 3 4 5 6 7 8

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

2d

1 2 3 4 5 6 7 8

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%);