安全边距:15px,用px就行
整体使用:box-sizing: border-box;设置padding时会往里面撑而不会向外,设置宽度为100%时不会占用padding部分
rem布局:
//csshtml{font-size:20px}//jsfunctionsetFontSize(){document.documentElement.style.fontSize =window.innerWidth /16+'px';}setFontSize();window.addEventListener('resize',function(){ setFontSize();});//尺寸计算:样式的rem = ps测量尺寸/2/20 (一般设计图宽度为640px)
点击300ms延迟
//fastclick.jswindow.addEventListener('load',function(){ FastClick.attach(document.body);},false);//或者使用zepto.js代替jquery
头部
标题//iOS 7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏
移动端轮播图(swiper)
<!--banner-->![](../img/banner.jpg)![](../img/banner.jpg)![](../img/banner.jpg)//左右按钮和分页器写成自己的样式,也用rem去写$(function(){//swipervarmySwiper =newSwiper('#banner', {direction:'horizontal',autoplay:3000,speed:1000,loop:true,pagination:'.swiper-pagination', }) })
1px的线
参考weui解决办法
https://github.com/Tencent/weui.js
清除输入框内阴影
在 iOS 上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样操作:
input,textarea{border:0;-webkit-appearance: none; }
头部和底部使用固定定位定住,注意要设置内容div的margin,不然顶部和头部会遮挡住内容
常用a链接
//发邮件Email//发短信123456//打电话123456//跳转到下一页的指定位置,本页面的a标签 后边加上#XXX,传入一个锚点,新页面指定位置加上idXXX这里是指定位置
设置文字超出部分省略 父级div设置overflow:hidden
//适用于单行文本p{ display:block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
动画
//尽可能多的利用硬件能力,如使用3D变形来开启GPU加速-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);//一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性:#ball-1 {transition: -webkit-transform.5s ease; -webkit-transform: translate3d(0,0,0);}#ball-1.slidein {-webkit-transform: translate3d(500px,0,0);}#ball-2 {transition: left.5s ease; left:0;}#ball-2.slidein {left:500px;}//3D变形会消耗更多的内存与功耗,应确实有性能问题时才去使用它,兼在权衡//尽可能少的使用box-shadows与gradients//尽可能的让动画元素不在文档流中,以减少重排position: fixed;position: absolute;//消除transition闪屏-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/-webkit-backface-visibility:?hidden;/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
网友评论