关于vw的疑问？
来源：3-3 移动端项目开发----表示层
yangxue11
2016-02-08 11:40
老师，您好。请问您的图片尺寸计算方法是怎么算的，如：音乐转盘的长宽为75px,那么您怎么转化为15vw的昵，对此不是太明白，还望解答一下。谢谢老师。
写回答
关注
2回答
-
- 北极阿熊
- 2016-02-11 23:00:51
vw是view-width的缩写，相应地还有vh是view-height的缩写。他们分别指的是视窗宽度和高度（移动端
即设备宽度和设备高度）。
1vw等价于1%的视窗宽度，15vw指的就是15%视窗宽度。
那么接下来看为什么是15vw。你所说的75px我查了一下是music_disc.png的尺寸，而我们现在正在定义
的是#music的宽高对不对？ #music这个div里不仅仅只有disc这一个元素，还有一个白色的背景和一个
红色的圆环边框。因此仅分配75px是不足的。
我在视频当中用截图工具进行测量，
可以看到视窗宽高大致是320*570，#music宽高应该是50*50
用计算器计算50/320之后得到0.156，即15.6%
等价用15.6vw表示。
-
- darcygail
- 2016-02-09 23:15:04
这个。。。其实
示例代码：
h1{font-size:8vw;}
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
就是实际的尺寸占屏幕宽度的比例，15vw就是15%的大小，这样总可以理解了呀。单位转换就不多说了
HTML5+CSS3实现春节贺卡
又逢新春佳节，春节贺卡搞起来，学会HTML5+CSS3实现春节贺卡
110033 学习 · 450 问题
相似问题