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

时间：2018-12-08 18:29:05 阅读：195 评论：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每日一练】移动端滑屏交互

标签：获取 height 设置元素交互需要 phone font 变化

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行