移动端CSS小结

Meta 标签

<meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.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:200px;

white-space: nowrap;

text-overflow:ellipsis;

overflow:hidden;

---

清除浮动影响

.clear:after {

content: ".";

display: block;

height: 0;

visibility: hidden;

clear: both;

}

.clear {

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