为了账号安全,请及时绑定邮箱和手机立即绑定

关于vw的疑问?

老师,您好。请问您的图片尺寸计算方法是怎么算的,如:音乐转盘的长宽为75px,那么您怎么转化为15vw的昵,对此不是太明白,还望解答一下。谢谢老师。

正在回答

2 回答

vw是view-width的缩写,相应地还有vh是view-height的缩写。他们分别指的是视窗宽度和高度(移动端

即设备宽度和设备高度)。

1vw等价于1%的视窗宽度,15vw指的就是15%视窗宽度。

那么接下来看为什么是15vw。你所说的75px我查了一下是music_disc.png的尺寸,而我们现在正在定义

的是#music的宽高对不对? #music这个div里不仅仅只有disc这一个元素,还有一个白色的背景和一个

红色的圆环边框。因此仅分配75px是不足的。

我在视频当中用截图工具进行测量,

56bca1be0001cfd505000316.jpg

56bca1be0001529005000316.jpg

可以看到视窗宽高大致是320*570,#music宽高应该是50*50

用计算器计算50/320之后得到0.156,即15.6%

等价用15.6vw表示。

2 回复 有任何疑惑可以回复我~
#1

juanjuanyao

music宽高明明是75px
2016-02-18 回复 有任何疑惑可以回复我~

这个。。。其实

示例代码:

h1{font-size:8vw;}

如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100

就是实际的尺寸占屏幕宽度的比例,15vw就是15%的大小,这样总可以理解了呀。单位转换就不多说了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
HTML5+CSS3实现春节贺卡
  • 参与学习       110033    人
  • 解答问题       450    个

又逢新春佳节,春节贺卡搞起来,学会HTML5+CSS3实现春节贺卡

进入课程

关于vw的疑问?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信