文档章节

h5小技巧总结

激烈的海胆
 激烈的海胆
发布于 2017/01/09 12:59
字数 884
阅读 30
收藏 0

1、移动端要加

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

2、background-color: rgba(0,0,0,0.5);

4、页面字号初始化

window.onload=function(){

    document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px';

}

5、input placeholder 

::-webkit-input-placeholder{

    color: rgba(135,79,0,0.7);

}

3、CSS书写顺序

    1.位置属性(position, top, right, z-index, display, float等)

  2.大小(width, height, padding, margin)

  3.文字系列(font, line-height, letter-spacing, color- text-align等)

  4.背景(background, border等)

  5.其他(animation, transition等)

 

4、垂直居中

     vertical-align:middle;

    

4、bootstrap图片居中

    class="img-responsive center-block"

3、h5禁止移动

document.body.addEventListener('touchmove', function (event) {

    event.preventDefault();

}, false);

 

html{

overflow-x: hidden;

}

body{

overflow-x: hidden;

}

 

5、jquery取消submit

btn_reg.click(function(){

    $("form").val("good");

    return false;   //加上这个取消默认动作,另一个按钮也一样

})

 

4、嵌入字体

@font-face {     font-family : 字体名称;     src : 字体文件在服务器上的相对或绝对路径; }

p {     font-size :12px;     font-family : "My Font";     /*必须项,设置@font-face中font-family同样的值*/ }

 

5、css属性选择器

 

a[class^=icon]{   background: green;   color:#fff; } a[href$=pdf]{   background: orange;   color: #fff; } a[title*=more]{   background: blue;   color: #fff; }

 

6、css的:not

 

    <style>

        div:not([id='page']){

            background:red;

            }

    </style>

    

    <body>

        <div id="header">页头</div>

        <div id="page">页体</div>

        <div id="footer">页脚</div>

    </body>

    

7、css  transition 就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

   div {

      width: 300px;

      height: 200px;

      background-color: orange;

      margin: 20px auto;

      -webkit-transition: -webkit-border-radius .5s .2s ease-out;

      transition:border-radius .5s .2s ease-out;

    }

    div:hover {

      border-radius: 20px;

    }

 

7、js 返回页面顶部

$(window).scrollTop(0);

$('body').scrollTop(0);

$('html').scrollTop(0);

 

8、h5页面的初始化

body,html,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button,

form,fieldset,input,textarea,p{

    font-size: 0;

    padding: 0;

    margin: 0;

    border:0;

    -webkit-touch-callout: none;

 

    outline:none;

    -webkit-appearance: none;

}

html{

    font-size: calc(100vw/3.75);

}

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

9、css不同屏幕大小

@media (min-width:768px){

.one{ width:100%; }

.two{ display:none; }

}

@media (max-width:768px){

.one{ display:none;  }

.two{ width:100%; }

}

10.ios 双点击

<script src="js/fastclick.js"></script>

<script language="javascript">

$(function() {

     FastClick.attach(document.body);

});

</script>

 

11、box-flex定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素:

#p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari 和 Chrome */ box-flex:1.0; border:1px solid red; } #p2 { -moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ box-flex:2.0; border:1px solid blue; }

 

10、解决双击页面上移

$(function() {

FastClick.attach(document.body);

});

 

12、

zepto 手机上的JQ

iscroll 处理IOS万恶的滚动条

fastclick 解决手机上点击穿透的问题

hammer.js – 多点触摸手势库

flipsnap.js 手机屏幕水平滑动框架

 

15、ajax 小结

$.ajax({

type: 'POST',

url: "132132.com",

dataType:'json',

cache: false,

traditional: true,

data: {"score":score},

beforeSend: function () {

},

success: function (data) {

 

}

})

16、2秒自动跳转

setTimeout(top.location.href="", 2000);

 

17、是否在ios 安卓 微信端打开

window.onload=function () {

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=="micromessenger") {

}else if (isAndroid){

top.location.href="http://zhushou.360.cn/detail/index/soft_id/3366567"

}else if(isiOS){

top.location.href="https://itunes.apple.com/us/app/51fan-bei-zui-gao-fan-li95/id1136587444?l=zh&ls=1&mt=8"

}

}

 

18、div里面png做背景图片,点击变色解决方法(也可以用于a标签)

div{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-tap-highlight-color: transparent;

outline:none;

background: none;

text-decoration: none;

}

 

19、css禁止选中背景图片

::selection

{

background-color:white

}

 

 -webkit-user-select: none;  /* Chrome all / Safari all */

    -moz-user-select: none;     /* Firefox all */

    -ms-user-select: none;      /* IE 10+ */

 

    /* No support for these yet, use at own risk */

    -o-user-select: none;

    user-select: none;

 

 

20、解决padding 100%

{

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

21、滚动条样式

::-webkit-scrollbar {

    width: 12px;

}

/* 滚动槽 */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    border-radius: 10px;

}

/* 滚动条滑块 */

::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: rgba(0,0,0,0.1);

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

    background: rgba(255,0,0,0.4);}

 

22、禁止识别为电话号码

 

<meta name = "format-detection" content = "telephone=no">

 

23、关于passvalue

 

function PassValue(e){

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;

var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

if (isAndroid){

Android.getGoodsInfoFromJs(e);

}else if(isIos){

passValue(e);

}

}

© 著作权归作者所有

上一篇: html 空格占位符
下一篇: HTML坐标
激烈的海胆
粉丝 0
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
web前端工程师们都是如何创建HTML5页面?

H5网页设计,可以大大提高视觉吸引力,并能提供更高质量的视频和音频,页面打开速度,视觉效果。满足了企业所有平台的网络推广需求,节省了企业的人力、物力和财力。但是H5页面也有点技巧。今...

大数据大佬
2018/06/19
0
0
Android WebView与H5联调技巧

版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/78 背景: 突然想写一篇关于Android WebView与H5联调技巧的文章,在这块内容也算是小有心...

xing_star
05/03
0
0
支付宝H5和微信公众号H5支付

此篇笔记总结于2016年,此时微信还没有开放外部H5支付,只是可以通过公众号支付间接打通H5支付,即H5必须在微信内部打开. 官网 支付宝:https://b.alipay.com/signing/productDetail.htm?pr...

零二一七
2016/08/30
1K
0
Android H5混合开发那点事(一)H5调用原生Android实现扫一扫功能

开发软件:AndroidStudio,WebStorm 扫一扫库文件下载:compile 'com.github.yuzhiqiang1993:zxing:2.2.5' 关键点:安卓与H5 方法互调,数据互通 整体思路:通过H5调用安卓原生方法进行扫一扫...

极客简讯
02/19
0
0
Android-开发姿势

Android 攻城狮—全套必备神级工具(开发,插件,效率) 如果你有用的酸爽的软件,请下面留言。我会持续更新。。。 “替你” 总结的 Gradle 配置 关于 Gradle 配置的一些总结,欢迎交流! 常...

掘金官方
2017/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
34分钟前
3
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
37分钟前
4
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
今天
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部