vw换算还是没明白到底用来做什么
来源：6-4 动态计算font-size
怒焰狂暴
2021-09-06
为什么iphone6里的font-size要定义成100px,为什么不是用width或者height来定义呢，一定要用字体大小，那如果换个设备呢，iphonex或者ipad呢，那我又需要定成多少呢？后面的例子里，为什么字体又用px，高宽又用vw和vh，完全迷糊了。具体的数值现在完全不知道该如何定义才是正确的，啥时候用px，啥时候用vw和vh。老师能否详细说明下
2回答
-
西门老舅
2021-09-06
同学你好，首先要知道移动端设备大小是不同的，比如iphone6是375px，而iphone6 plus是414px，所以页面里的布局需要等比进行放大或缩小，假设在iphone6下div宽度100px，那么在iphone6 plus下这个div宽度就需要变成110.4px。
我们编写的移动端代码只有一套，也就是说用px做单位，是没有办法在iphone6下是100px，在iphone6 plus下是110.4px，这是办不到的。
rem单位是一个相对单位，1个rem等于html的font-size的大小，所以我们可以想办法让html的font-size在不同的设备下不一样，比如iphone6下font-size:100px，而iphone6 plus下font-size:110.4px的话，那么给div设置1rem，在iphone6下1rem转成px就是100px，而在iphone6 plus下1rem转成px就是110.4px，这不就等比变化了嘛！
那么问题来了，我们如何让html的font-size在iphone6下是100px，而在iphone6 plus下是110.4px呢？这里我们采用vw单位，vw是一个相对页面宽度的单位，100vw等于页面的宽，所以iphone6下100vw等于375px，iphone6 plus下100vw等于414px，那么当我们设置html{ font-size: 26.66667vw }的时候，在iphone6下换算成px就是100px，而在iphone6 plus下换算px就是110.4px，这样我们还是只写了一套代码就在不同设备下换算出了不同的px数值。
我们只需要按照iphone6去写rem单位即可，这样其他设备会自动换算得到等比的变化，所以不用关心iphonex或者ipad。至于你说的后面的例子，请问是哪个例子？具体是哪个小节的案例？
这里的建议：
可以把移动端这章重新在看一遍，仔细的看一遍，相信你绝对会有新的收获。
可以再留言给我，对一些点再次进行探讨。
30 -
快乐的Justin
2021-10-19
我想老师的的意思是
现在 设计稿和网页编写都是基于iphone6去设计和编写，使用rem单位后在其他设备上同样会等比放大，元素之间的大小比例保持不。
012021-10-19
相似问题