1、Meta标签
<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自动识别邮箱 <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content=“email=no"/> 3、禁止文本选择 -webkit-user-select:none4、屏蔽输入框阴影，去掉按钮默认样式 -webkit-appearance:none 5、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; } 6、css3多行文本换行 { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }7、字体不换行，溢出省略号 { width:300px; white-space: nowrap; text-overflow:ellipsis; overflow:hidden; }8、清除浮动 .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1; } 9、表格内容自动换行 table-layout :fixed;word-break: break-all;word-wrap :break-word;
10、IOS快速回弹
在IOS上如果想让一个元素拥有像Native的滚动效果，可以这样写
overflow-y: scroll; -webkit-overflow-scrolling: touch; 11、css3元素居中
translate3d实现方式
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);
translate2d实现方式
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%);12、Retina屏的移动设备实现1px线，采用伪类+transform的方式
.menu li{ position: relative; } .menu li:after{ content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: #E1E1E1; -webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }13、动态bar实现
<div class="i-default-bar"> <div class="i-bar"></div> </div> .i-default-bar { height: 4px; background: #EAEAEA; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; } .i-bar { height: 100%; width: 0; background: #FF8885; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; transition: all 1s linear; -moz-transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; } $('.i-bar').css('width','50%');14、aside-right menu动画
.aside { position: fixed; top: 0; right: 0; z-index: 100; visibility: hidden; width: 100%; height: 100%; background: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .aside-vertical { width: 100%; height: 100%; top: 0; z-index: 100; } .aside-right { visibility: visible; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .aside-right.aside-open { visibility: visible; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }