移動端小案例

html

"en

">"
root
">
class="
content
">
class="
content-item  active
"  >
class="
header
">
class="
left
">
class="
name
">廣州
class="
sj">
class="
center
">星光大道測試影院
class="
right
">
class="
bs">
class="
tab">
class="
tab-item 
">
class="
a active
">正在熱映
class="
tab-item
">
class="
a">即將熱映
class="
content-item
">**
class="
content-item
">活動
class="
content-item
">我的
class="
bar">
class="
bar-item
">
class="
img active
">
class="
text  active
" >購票
class="
bar-item
">
class="
img">
class="
text
">**
class="
bar-item
">
class="
img">
class="
text
">活動
class="
bar-item
">
class="
img">
class="
text
">我的

*

//設定rem
@font:375 /10rem;
//給html設定高度為100%
html,
body 
#root 
.header 
.sj 
}.center 
.right 
}.tab } }
//注意: 偽元素實際上是當前元素的子元素
//&-item.a.active::after 
}    }
}  //底部
.bar }}
&:nth-child(2
)         }
}&:nth-child(3
)         }
}&:nth-child(4
)         }
}//文字樣式
.text }}
}}

/*

適配**開始   
*/function adate()
adate()
//裝置跟換
window.onresize =adate
/*適配**結束   
*//*
底部tab點選頁切換邏輯 
*///
劃過事件，底部的高亮，字型顏色高亮，選項卡頁要切換
//獲取底部的元素，偽陣列
let tabs = document.queryselectorall('
.bar-item')
//獲取元素
let imgs = document.queryselectorall('
.img')
let texts = document.queryselectorall('
.text')
let cis = document.queryselectorall('
.content-item')
let tabitem = document.queryselectorall('
.tab-item')
let a = document.queryselectorall('.a'
)//遍歷每個底部的盒子
for(let i=0; i)
//那個滑動事件，給那個新增active類
				
移動端開發案例
touchstart touchmove touchend 可以實現拖動元素 但是拖動元素需要當前手指的座標值 我們可以使用 targettouches 0 裡面的pagex 和 pagey 移動端拖動的原理 手指移動中，計算出手指移動的距離。然後用盒子原來的位置 手指移動的距離 手指移動的距離 手...
				
移動端小技巧
supports display flex supports not display flex supports display webkit flex or display moz flex or use styles here 第一種方法 var supportsflex css.support...
				
移動端小技巧積累
1.移動端上水平溢位滾動 無滾動條，只有移動端有效 charset utf 8 name viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no titl...