1、Meta 标签
[HTML] 纯文本查看 复制代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
移动端页面添加 meta 标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。
2、禁止 iOS 自动识别电话和 Android 自动识别邮箱
[HTML] 纯文本查看 复制代码 <meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content=“email=no"/>
3、禁止文本选择
[CSS] 纯文本查看 复制代码 -webkit-user-select:none
4、屏蔽输入框阴影，去掉按钮默认样式
[CSS] 纯文本查看 复制代码 -webkit-appearance:none
5、border-box
想要设置一个宽度100%的元素，又要设置元素固定的 padding-left 或 padding-right，还有边框，就会出现水平滚动条，可以用 box-sizing 来解决。
[CSS] 纯文本查看 复制代码 *, *: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;
}
6、css3 多行文本换行
[CSS] 纯文本查看 复制代码 overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
7、清除浮动
[CSS] 纯文本查看 复制代码 .clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
8、表格内容自动换行
[CSS] 纯文本查看 复制代码 table-layout :fixed;word-break: break-all;word-wrap :break-word;
9、iOS 快速回弹
在 iOS 上如果想让一个元素拥有像 Native 的滚动效果，可以这样写
[CSS] 纯文本查看 复制代码 overflow-y: scroll;
-webkit-overflow-scrolling: touch;
10、css3 元素居中
[CSS] 纯文本查看 复制代码 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);
[CSS] 纯文本查看 复制代码 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%);
| 
收藏
淘帖
踩
