工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。
@1像素边框
@supports (-webkit-backdrop-filter:blur(1px)) { .o2_mark i { border: 0 } .o2_mark i::before { content: "\20"; border: 1px solid #666; position: absolute; left: 0; top: 0; width: 200%; height: 200%; -webkit-transform-origin: left top; -webkit-transform: scale(.5); -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)");
.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>
.example {
pointer-event: none;
}
<body ontouchstart="">
字体：
由此移动的字体reset，可以统一设置为：
font-family: -apple-system,Helvetica,sans-serif;
Google Chrome默认浏览器字体最小字体为：12px，而我们手机端页面常常字体小于12px。 解决：右上角（自定义及控制） → 设置 → 显示高级设置 → 网络内容（自定义字体） → 最小字号（最小可以设置为6px）
参考资料：
原文：http://www.cnblogs.com/pingfan1990/p/5557181.html