H5常用技巧
工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。
一、@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红米监测不到
参考资料：
H5常用技巧的更多相关文章
- chrome控制台常用技巧有哪些
chrome控制台常用技巧有哪些 一.总结 一句话总结:别的里面支持的快捷键,chrome里面几乎都支持,比如sublime中的ctrl+d,其实真是一通百通,都差不多的 1.chrome如何快速切换 ...
- 【shell 大系】Linux Shell常用技巧
在最近的日常工作中由于经常会和Linux服务器打交道,如Oracle性能优化.我们数据采集服务器的资源利用率监控,以及Debug服务器代码并解决其效率和稳定性等问题.因此这段时间总结的有关Linux ...
- oracle存储过程常用技巧
我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...
- Vim 常用技巧：
Vim 常用技巧: 将回车由默认的8个空格改为4个空格: 命令:set sw=4 修改tab为4空格: 命令:set ts=4 设置每一级的缩进长度: 命令:set shiftwidth=4 设置文件 ...
- JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧！！！！！！
前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!2016-09-29 17 ...
- Android ListView 常用技巧
Android ListView 常用技巧 Android TextView 常用技巧 1.使用ViewHolder提高效率 ViewHolder模式充分利用了ListView的视图缓存机制,避免了每 ...
- JavaScript常用技巧总结（持续添加中...）
在我学习过程中收集的一些常用技巧: typeof x !== undifined 判断x是否已定义: x === Object(x) 判断x是否为对象: Object.keys(x).length ...
- Eclipse调试常用技巧(转)
Eclipse调试常用技巧 转自http://daimojingdeyu.iteye.com/blog/633824 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头双击就 ...
- AS技巧合集「常用技巧篇」
转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=254723&extra=page%3D2%26filter%3Dautho ...
随机推荐
- JS_高程4.变量，作用域和内存问题（2）执行环境及作用域
1.执行环境:执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为, 每个执行环境都有一个与之相关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中. 2.全局执行环境: 最外围的 ...
- springboot + websocket + spring-messaging实现服务器向浏览器广播式
目录结构 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...
- HRD Emulator in HTML5
Posted on March 21, 2012 by Moto Just like MPEG-2 video uses VBV (Video Buffer Verifier), H.264 stan ...
- [Web 前端] mobx教程(二)-mobx主要概念
cp from : https://blog.csdn.net/smk108/article/details/84960159 通过<Mobx教程(一)-Mobx简介>我们简单理解了Mob ...
- Huawei® ENSP & VRP CheatSheet
#################### 系统命令 #################### system-view sysname display current-configuration und ...
- windows10创建ftp服务器
1.创建用户 2.创建FTP服务 3.开通防火墙服务 建立端口21,20入站规则 4.访问测试
- Adroid动态加载Apk-插件化技术框架(动态代理方案)
技术:Android + java +动态加载+插件化 概述 为什么要使用插件化?在开发中,一个项目只会越做越大.初始版本可能是单一功能,后续可能加上各种风马牛不相及的功能.所以我认为插件化可以使 ...
- masonry 基本用法
一:masonry 基本用法 fistView=[[UIView alloc] init]; fistView.backgroundColor=[UIColor redColor]; [self.vi ...
- Java8新特性interface中的static方法和default方法
static方法 java8中为接口新增了一项功能:定义一个或者更多个静态方法.用法和普通的static方法一样. 代码示例 public interface InterfaceA { /** * 静 ...
- MySQL安装、配置、测试
MySQL安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.MySQL安装配置 4.Java访问MySQL测试 5.注事事项 6.相关博文 >>看不清的图片 ...