h5小技巧总结

最新推荐文章于 2021-11-24 10:23:05 发布

chenglinzi2356

最新推荐文章于 2021-11-24 10:23:05 发布

阅读量201

点赞数

文章标签：移动开发操作系统人工智能

原文链接：https://my.oschina.net/xuexipython/blog/821282

版权

1、移动端要加

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

4、页面字号初始化

window.οnlοad=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>

</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 双点击

$(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.οnlοad=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、禁止识别为电话号码

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);

}

转载于:https://my.oschina.net/xuexipython/blog/821282

chenglinzi2356

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5小技巧总结

1、移动端要加 <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> 2、back...
复制链接

扫一扫