美文网首页
移动端代码规范(1)

移动端代码规范(1)

作者: 醉于麦田 | 来源:发表于2019-08-03 10:33 被阅读0次

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

相关文章

  • 移动端代码规范(1)

    安全边距:15px,用px就行 整体使用:box-sizing: border-box;设置padding时会往里...

  • 移动端代码规范

    安全边距:15px,用px就行 整体使用:box-sizing: border-box;设置padding时会往里...

  • [移动web]基本概念

    代码规范 一.移动端的相关开发技术 1.原生开发安卓iOSWinPhone 2.Hybrid开发(混合开发)原生A...

  • 移动端页面制作

    1.既然是移动端, 就一定要按照移动端规范走, 直接使用 Chrome 浏览器进行移动端开发测试 2.推荐固定宽度...

  • Linux_339_Nginx七层转发实战

    Nginx七层转发实战 检测移动端客户端1.修改nginx.conf支持移动端检测,修改部分代码如下针对移动端系统...

  • Sass 移动端 代码

  • 移动端banner设计要点

    一、移动端banner设计规范主要有三点 1、信息传达明确 2、吸引用户点击 3、符合产品风格 二、移动端bann...

  • 移动端尺寸规范

    http://www.68design.net/work/558044

  • vue疑难杂症

    1.vue实现一个移动端屏蔽滑动的遮罩层元素代码@touchmove.prevent 防止移动端触摸冒泡 遮罩层...

  • 接口测试_动手

    一、需要的素材 接口规范 服务端源代码 客户端源代码 代码生成工具 二、环境搭建 接口规范浏览器打开地址,输入密码...

网友评论

      本文标题:移动端代码规范(1)

      本文链接:https://www.haomeiwen.com/subject/vazddctx.html