工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。
一、@support断定浏览器支持情况定义不同样式
@1像素边框
@supports (-webkit-backdrop-filter:blur(1px)) {
.o2_mark i {
border:
}
.o2_mark i::before {
content: "\20";
border: 1px solid #;
position: absolute;
left: ;
top: ;
width: %;
height: %;
-webkit-transform-origin: left top;
-webkit-transform: scale(.);
-webkit-box-sizing: border-box;
}
}
@sticky吸顶优化体验
sticky使用条件：
sticky 元素只能在父容器内活动
sticky 元素父容器不能含有overflow:hidden 和 overflow:auto
.wx618_tabs{
position:relative;
&.fixed ul{
position:fixed;
top:0;
left:0;
width:100%;
}
}
//支持sticty属性，运行
@suports (position:-webkit-sticky){
.wx618_tabs{
position:-webkit-sticky;
top:0;
&.fixed ul{position:relative}
}
}
@JavaScript中提供了window.CSS.supports方法
// JavaScript中提供了window.CSS.supports方法
// 第一种方法
var supportsFlex = CSS.supports("display", "flex");
// 第二种方法
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
二、calc加减乘除运算
.col-3 {
width: calc(100%-10px);
height: 200px;
}
.clo-3 li {
float: left;
width: calc(100% / 3); /* 33.3% */
height: 200px;
}
三、图片水平镜像翻转
.example-1 {
transform: scaleX(-1); /* 方法一 */
}
.example-2 {
transform: rotateY(180deg); /* 方法二 */
}
四、自旋转运动
<div class="example"></div>
.example {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
animation: autogyRation 4s linear infinite;
} @keyframes autogyRation {
from {
transform: rotate(0deg) translate(-60px) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-60deg) rotate(-360deg);
}
}
案例展示：demo
五、扫光动画
<style>
.sample{
background-color: #0E1326;
padding-top:30px;
overflow: hidden;
}
.blank_text{
position: relative;
width:200px;
margin:20px auto;
color: #fff;
line-height: 1;
font-size: 50px;
font-size: 0.74074rem;
text-align: center;
overflow: hidden;
font-family: "icomoon";
}
.blank_text:after{
width: 300%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
-webkit-animation: slide ease-in-out 2s infinite;
}
@-webkit-keyframes slide{
0%{-webkit-transform:translateX(-66.666%);}
100%{-webkit-transform:translateX(0);}
}
</style> <div class="sample"> <div class="blank_text">选择一本你喜欢的</div>
</div>
六、超透事件css属性
.example {
pointer-event: none;
}
七、加ontouchstart促使css：active生效
<body ontouchstart="">
八、设置Chrome最小字体显示小于12px
字体：
- ios9+的css字体设置了-apple-system的话中文会调用苹方，英文/数字则调San Francisco；San Francisco在ios/mac上没有显式暴露出来(不能通过字体名字调用)，需要通过这种方式调用；
- 在不支持-apple-system的ios系统下会调用华文细黑的中文/英文/数字；
- sans-serif在非ios9+下会调用华文细黑的中文/英文/数字；
- sans-serif在ios9+下会调用苹方的中文/英文/数字；
- sans-serif在安卓下会调用系统的中文/英文字体，一般不需要其他设置；
- 总的来说sans-serif在手机系统下会调用默认中文字体的中文/英文/数字
由此移动的字体reset，可以统一设置为：
font-family: -apple-system,Helvetica,sans-serif;
九、设置Chrome最小字体显示小于12px
Google Chrome默认浏览器字体最小字体为：12px，而我们手机端页面常常字体小于12px。 解决：右上角（自定义及控制） → 设置 → 显示高级设置 → 网络内容（自定义字体） → 最小字号（最小可以设置为6px）
十、设置Chrome最小字体显示小于12px
//旋转警告
var warnWp = document.querySelector(".warn_wp");
function orientationChange() {
switch(window.orientation) {
case :
warnWp.style.display = "none";
break;
case -:
warnWp.style.display = "block";
break;
case :
warnWp.style.display = "block";
break;
};
};
window.addEventListener("orientationchange",function(){
orientationChange();
},false); //发现感觉android红米监测不到
参考资料：