移动端代码规范(1)

安全边距: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://weui.io/

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;/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

图片压缩https://tinypng.com/

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安全边距:15px,用px就行 整体使用:box-sizing: border-box;设置padding时会往里...
    邢泽川阅读 1,124评论 0 0
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 10,010评论 0 8
  • # 移动端开发 ### 1. 1px问题如何解决 #### ①伪类 + transform(比较完美) > 原理是...
    sunnyRube阅读 1,003评论 0 0
  • 简霖Lin阅读 351评论 0 0
  • 答辩完成之后,我们都没有急着收拾行李。
    Cooki1阅读 171评论 0 0

友情链接更多精彩内容