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 ...
随机推荐
- unity-Profiler调试Android的正确姿势（mumu模拟器）
1. 前置条件 安卓的相关环境 java.ant.sdk.ndk 什么的都装好(其实这里只需要 sdk 里面的 adb),配好 adb 工具的环境变量(意思就是 cmd 里直接输 adb 命令即可) ...
- ABAP语言实现 左移 <<、无符号右移 >>> 位移操作
这几天要在ABAP中实现 3DES 标准对称加密算法,与其他外部系统进行加密/解密操作.由于ABAP语言中没有 左移 <<.无符号右移 >>> 操作,只能自己实现 思路 ...
- Canvas 和 SVG 的不同
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- WPF中，输入完密码回车提交 ，回车触发按钮点击事件
类似与winform中窗体的AcceptButton属性,在wpf中,需要将按钮的IsDefault设置为true就行.
- Git - 生成ssh key步骤以及如何clone所有的远程分支
https://www.cnblogs.com/gongyuhonglou/p/6922721.html 2. 生成ssh key $ ssh-keygen -t rsa -C “邮箱”按3个回车,密 ...
- 一步步教你轻松学主成分分析PCA降维算法
一步步教你轻松学主成分分析PCA降维算法 (白宁超 2018年10月22日10:14:18) 摘要:主成分分析(英语:Principal components analysis,PCA)是一种分析.简 ...
- webstorm11.0下载地址和webstorm11.0破解程序patcher.exe下载使用方法说明 前端IDE工具的利器
20160107以下亲测可行. webstorm11.0下载地址:http://www.fxxz.com/soft/109234.html webstorm11.0下载安装破解使用说明: 下载完Web ...
- 这些APP开发技巧可少花60万！
用户需求——我偏不用干嘛要装? 随着手机的普及,大众流量的端口从电脑转移到手机,传统的商业平台从线下到电脑再到手机进行了转换.手机APP作为移动互联网的入口,众多创业者凭借一个手机APP成就了亿万财富 ...
- win10 caffe python Faster-RCNN训练自己数据集(转)
一.制作数据集 1. 关于训练的图片 不论你是网上找的图片或者你用别人的数据集,记住一点你的图片不能太小,width和height最好不要小于150.需要是jpeg的图片. 2.制作xml文件 1)L ...
- spring boot 配置注入
spring boot配置注入有变量方式和类方式(参见:<spring boot 自定义配置属性的各种方式>),变量中又要注意静态变量的注入(参见:spring boot 给静态变量注入值 ...