一、理論
1
//對移動端輕按起作用
a{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}
2
//設置盒子模型，加margin/padding不影響盒子本身的尺寸
//非固定像素的流式布局可以有效防止溢出
body{box-sizing:border-box;-webkit-box-sizing:border-box;}
3
input{
outline: none;
border:none;
border:1px solid #ccc;
}
input{
resize:none;
appearance:none;
-webkit-appearance:none;
}
4
//中間搜索框的縮放處理，左右兩邊必須固定定位
.searchBox{
margin:0px 100px; or padding:0px 100px;
height:100%;
background-color:red;
}
5
偽元素
.same_searchBox::before{
content: "";
width: 27px;
height: 23px;
position: absolute;
background-color: #f7f7f7;
border-radius: 10px;
left: 80px;
top: 9px;
/* background-size: 200px 200px; */
}
6
居中
.same_bannerIndicator{
width: 128px;
height: 10px;
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
7
消除文本基線值
img{display:block;} or {vertical-align:botton} or {font-size:0}
8
標準適配方案:
1)網(wǎng)頁寬度必須和瀏覽器一致；
2)默認顯示的縮放比例和PC端保持一致；
3)不允許用戶自行縮放網(wǎng)頁；
跳轉適配怎么實現(xiàn)?
9
把更多物理像素點壓縮到px里
屏幕像素比：一個px單位的屏幕能放幾個物理像素？
device-width的計算公式為：設備的物理分辨率/(devicePixelRatio * scale)
通過js設置viewport的方法如下:
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
動態(tài)計算html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
@baseFontSize: 75;//基于視覺稿橫屏尺寸/100得出的基準font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
10
在移動端不建議jQuery，而是zepto.js或h5的原生api
11
設置css屬性 -webkit-user-select:none; 控制用戶不可選擇文字；
12
區(qū)域性 overflow: scroll | auto 滾動時使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）
13
單行、多行溢出省略：
/* 單行省略 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行省略 /
.ellipsis-2l {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; / 數(shù)值代表顯示幾行 */
-webkit-box-orient: vertical;
}
14
垂直居中常用方法：
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
/* css樣式 */
/* (1) 模仿單行文字居中的方式 */
.wrap {
width: 200px;
height: 80px;
line-height: 80px;
}
.box {
display: inline-block;
vertical-align:middle;
}
/* (2) 已知寬高，通過position:absolute; */
.wrap {
width: 200px;
height: 200px;
position: relative;
}
.box {
width: 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -40px;
}
/* (3) 未知寬高，通過css3屬性 transfrom */
.wrap {
width: 200px;
height: 200px;
position: relative;
}
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* (4) 通過flex布局 */
<body>
<div class="wrap flexbox flexbox-center flexbox-middle">
<div class="box"></div>
</div>
</body>
/* css樣式 */
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/* 水平居中 */
.flexbox-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
/* 垂直居中 */
.flexbox-middle {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
15
retina屏幕實現(xiàn)真正的1px邊框： //http://caibaojian.com/mobile-web-app-fix.html
<body>
<div class="box retina-border rt-bd-all"></div>
</body>
/* css樣式 */
.box {
width: 200px;
heigth: 100px;
box-sizing: border-box;
border: 1px solid #aaa;
}
/* 去掉元素原有的邊框 */
.retina-border {
position: relative;
border: none;
}
/* 通過設置偽元素放大到2倍的寬高，設置1px邊框，再縮小1倍，以達到0.5px邊框的效果*/
.retina-border:after {
content: '';
display: block;
width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
border: 0px solid #aaa;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.rt-bd-all:after {
border-width: 1px;
}
/* 如果只是想設置一條邊框，可以這樣改一下，以此類推 /
<body>
<div class="box retina-border rt-bd-b"></div>
</body>
/ css樣式 */
.tr-bd-b:after {
border-bottom-width: 1px;
}
.tr-bd-t:after {
border-top-width: 1px;
}
.tr-bd-l:after {
border-left-width: 1px;
}
.tr-bd-r:after {
border-right-width: 1px;
}
16
rem-適配，常用的適配方案有：
1)伸縮布局flex
2)流式布局 百分比
3)響應布局 媒體查詢 (超小屏設備的時候：流式布局)
4)共同點：元素只能做寬度的適配（排除圖片，圖片不做寬度適配）
5)適配方案rem: 寬度和高度都能做到適配（等比縮放）
控制html上字體大小(100px易于換算)去控制以rem為單位的其它尺寸；
當前rem基準值 = 當前設備寬度/設計稿寬度 * 預設基準值
比如320px/640px *100px = 50px; 所以當前設備的rem基準值必須改成50px;
17
如何調(diào)整基準值：
js換算或媒體查詢（推薦）
18
end的作用：
('.wjs_book')
$("p").find("span").end().css("border", "2px red solid");//選擇所有段落，找到這些段落中的 span 元素，然后將它們恢復為段落，并把段落設置為兩像素的紅色邊框
end() 方法結束當前鏈條中的最近的篩選操作，并將匹配元素集還原為之前的狀態(tài)。
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
第二個 find() 查找的是 <ul class="first"> 內(nèi)的 '.bar' ，而不是在列表的 <li class="foo"> 中查找
而 end() 方法用來關閉代碼塊
andSelf();
http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html
jQuery速度再快，也無法與原生的javascript方法相比。所以有原生方法可以使用的場合，盡量避免使用jQuery。
以最簡單的選擇器為例，document.getElementById("foo")要比$("#foo")快10多倍 http://jsperf.com/id-vs-class-vs-tag-selectors/46
二實戰(zhàn)
2.1
bg的開發(fā)流程：
首先，還是得把html架構搭建好；
其次，設計一定要簡潔，如何動手coding;
再次，盒子模型對布局的影響非常大，要特別注意；
2.2
首先要設定一個框架，html的框架：
