-
安全边距：15px,用px就行
-
整体使用：
box-sizing: border-box;设置padding时会往里面撑而不会向外，设置宽度为100%时不会占用padding部分 -
rem布局:
//css
html{font-size:20px}
//js
function setFontSize() {
document.documentElement.style.fontSize = window.innerWidth / 16 + 'px';
}
setFontSize();
window.addEventListener('resize', function() {
setFontSize();
});
//尺寸计算：样式的rem = ps测量尺寸/2/20 （一般设计图宽度为640px）
- 点击300ms延迟
//fastclick.js
<script type="application/javascript" src="../js/fastclick.js"></script>
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
//或者使用zepto.js代替jquery
- 头部
<head>
<meta charset="utf-8" />
<title>标题</title>
//iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no，minimal-ui">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<script type="application/javascript" src="../js/fastclick.js"></script>
<script type="text/javascript" src="../js/adapt-screen.js"></script>
</head>
- 移动端轮播图（swiper）
<body>
<!--banner-->
<div id="banner" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
//左右按钮和分页器写成自己的样式，也用rem去写
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/swiper-3.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
//swiper
var mySwiper = new Swiper('#banner', {
direction: 'horizontal',
autoplay: 3000,
speed: 1000,
loop: true,
pagination: '.swiper-pagination',
})
})
</script>
-
1px的线
参考weui解决办法
https://weui.io/
https://github.com/Tencent/weui.js -
清除输入框内阴影
在 iOS 上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样操作：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
-
头部和底部使用固定定位定住，注意要设置内容div的margin，不然顶部和头部会遮挡住内容
-
常用a链接
//发邮件
<a href="mailto:XXX@163.com">Email</a>
//发短信
<a href="sms:123456">123456</a>
//打电话
<a href="tel:123456">123456</a>
//跳转到下一页的指定位置,本页面的a标签 后边加上#XXX，传入一个锚点,新页面指定位置加上idXXX
<a href="index.php/category/index/id/101.html#xzccp">
<div id="xzccp">这里是指定位置</div>
- 设置文字超出部分省略 父级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/
网友评论