工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。
一、@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 ...
随机推荐
-
Oracle 行转列，列转行
一.行转列1.1.初始测试数据表结构:TEST_TB_GRADESql代码:1 create table TEST_TB_GRADE2 (3 ID NUMBER(1 ...
-
百度地图学习（Ⅰ）-Android端地图的显示及简单应用
ps:(1.地图应用一定要在真机测试: 2.Design By:Android Stdio: 3.百度地图官方参考链接(http://developer.baidu.com/map/index.php ...
-
[mondrian] 分析一个简单的schema文件
<?xml version="1.0" encoding="UTF-8"?> <Schema name="Mondrian" ...
-
java 访问修饰符
此题考察修饰符,函数定义等,故从网上搜罗了下相关资料,总结如下: 类.方法.成员变量和局部变量的可用修饰符 修饰符 类 成员访求 构造方法 成员变量 局部变量 abstract(抽象的) √ √ - ...
-
Live555中RTP包的打包与发送过程分析
这里主要分析一下,live555中关于RTP打包发送的部分.在处理完PLAY命令之后,就开始发送RTP数据包了(其实在发送PLAY命令的response包之前,就会发送一个RTP包,这里传输就已经开始 ...
-
[设计模式]解释器(Interpreter)之大胆向MM示爱吧
为方便读者,本文已添加至索引: 设计模式 学习笔记索引 写在前面 “我刚写了个小程序,需要你来参与下.”我把MM叫到我的电脑旁,“来把下面这条命令打进去,这是个练习打(Pian)符(ni)号(de)的 ...
-
StackExchange.Redis 基本使用 （一） （转）
StackExchange.Redis下载地址: https://github.com/StackExchange/StackExchange.Redis/blob/master/Docs/Basic ...
-
node.js零基础详细教程(3)：npm包管理、git github的使用
第三章 建议学习时间4小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...
-
Ext.grid.EditorGridPanel保存
用get方法传递编辑的数据会出现乱码,解决get乱码的方法就是encodeURI(param),然后在后台转码: String strJson = new String(request.getPar ...
-
JavaEE中的MVC（三）定制Struts——命令模式
注:本文并不讲解Struts框架,只研究这种思想的使用 JavaEE中的MVC(五)定制Struts--Action跳转Jsp 在讲这个之前,先给你们看一下我服务器1.0版本的截图,是不是很可笑,看起 ...