1. Meta标签
移动端页面添加meta标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
2. 禁止IOS自动识别电话和Android自动识别邮箱
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content=“email=no"/>
3. 禁止文本选择
-webkit-user-select:none
4. 屏蔽输入框阴影,去掉按钮默认样式
-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线(0.5px线),采用伪类+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);
}
15. gradient过渡兼容
background:-moz-linear-gradient(top, #FFFFFF, #000000);
background:-webkit-linear-gradient(top, #FFFFFF, #000000);
background:-ms-linear-gradient(top, #FFFFFF, #000000);
background:linear-gradient(top, #FFFFFF, #000000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#000000)";
+background:#f9f9f9;/*ie6、7*/
16. H5消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
17. Android设备 line-height垂直居中偏移
Android设备line-height垂直居中的要求是:字体大小为被2整除的整数且不可小于12px,可以设置元素的伪类,改变margin-top的值使元素居中显示
.btn{
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 20px;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
&::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-top: 3px;
}
}
18. Chrome支持小于12px 的文字
-webkit-text-size-adjust:none;
19. 字体变清晰变细
-webkit-font-smoothing: antialiased;
20. 图片加载错误隐藏边框
img[src=""],img:not([src]){
opacity: 0;
}