首页 > 移动平台 > 详细

【js每日一练】移动端滑屏交互

时间:2018-12-08 18:27:30      阅读:162      评论:0      收藏:0      [点我收藏+]
一、知识点
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每日一练】移动端滑屏交互

原文:http://blog.51cto.com/9161018/2327931

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!