1. 程式人生 > >【js每日一練】移動端滑屏交互

【js每日一練】移動端滑屏交互

2.0 窗口大小 變化 當前 成了 ont 3.2 屏幕寬度 amp

一、知識點
1、em && rem && vw/vh
em:根據當前樣式裏面定義的font-size大小來計算,如當前樣式裏面沒定義font-size,那麽就根據父級上的font-size大小來計算
如:
.box{
font-size:20px; //此時1em=20px
height:20em; //那麽,20em=400px,也就是height:400px
}
rem:只根據html上的font-size大小進行變化
html上的font-size大小需要動態計算,計算方式有2種:
a. 通過js獲取窗口大小
b. vm/vh( 100vw=當前窗口的大小 )
vw:根據當前視口的寬度來計算
100vw:代表整個屏幕寬度,也就是把屏幕寬度分成了100個格子,在320px的情況下,每個格子占據3.2px
100vh:代表整個屏幕高度
如:以iphone6為例,屏幕寬度414px
設置:html{ font-size:4vw; } //即等價於html{ font-size:16.56px }
#box{ height:12.077294685990339rem; } //即等價於#box{ height:200px; }
這樣也可以通過動態計算html的font-size大小,來動態設置元素的樣式

2、

【js每日一練】移動端滑屏交互