安全邊距：15px,用px就行
整體使用：
box-sizing: border-box;設(shè)置padding時會往里面撐而不會向外，設(shè)置寬度為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 （一般設(shè)計圖寬度為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>標(biāo)題</title>
//iOS 7.1的Safari為meta標(biāo)簽新增minimal-ui屬性，在網(wǎng)頁加載時隱藏地址欄與導(dǎo)航欄
<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清除輸入框內(nèi)陰影
在 iOS 上，輸入框默認(rèn)有內(nèi)部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣操作：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
頭部和底部使用固定定位定住，注意要設(shè)置內(nèi)容div的margin，不然頂部和頭部會遮擋住內(nèi)容
常用a鏈接
//發(fā)郵件
<a href="mailto:XXX@163.com">Email</a>
//發(fā)短信
<a href="sms:123456">123456</a>
//打電話
<a href="tel:123456">123456</a>
//跳轉(zhuǎn)到下一頁的指定位置,本頁面的a標(biāo)簽 后邊加上#XXX，傳入一個錨點,新頁面指定位置加上idXXX
<a href="index.php/category/index/id/101.html#xzccp">
<div id="xzccp">這里是指定位置</div>
- 設(shè)置文字超出部分省略 父級div設(shè)置
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的動畫流暢度會明顯優(yōu)于使用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變形會消耗更多的內(nèi)存與功耗，應(yīng)確實有性能問題時才去使用它，兼在權(quán)衡
//盡可能少的使用box-shadows與gradients
//盡可能的讓動畫元素不在文檔流中，以減少重排
position: fixed;
position: absolute;
//消除transition閃屏
-webkit-transform-style: preserve-3d;
/*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
-webkit-backface-visibility:?hidden;
/*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏）*/
- 圖片壓縮 https://tinypng.com/
