課程
/前端開發
/Html5
/HTML5+CSS3實現春節賀卡
老師，您好。請問您的圖片尺寸計算方法是怎么算的，如：音樂轉盤的長寬為75px,那么您怎么轉化為15vw的昵，對此不是太明白，還望解答一下。謝謝老師。
2016-02-08
源自：HTML5+CSS3實現春節賀卡 3-3
正在回答
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表示。
juanjuanyao
這個。。。其實
示例代碼：
h1{font-size:8vw;}
如果視口的寬度是200mm，那么上述代碼中h1元素的字號將為16mm，即(8x200)/100
就是實際的尺寸占屏幕寬度的比例，15vw就是15%的大小，這樣總可以理解了呀。單位轉換就不多說了
舉報
又逢新春佳節，春節賀卡搞起來，學會HTML5+CSS3實現春節賀卡
3 回答關于vw的問題
1 回答關于寬高vw,vh
2 回答關于vw和vh以及rem的計算問題？
2 回答vw的兼容性問題。。
1 回答vw寬度問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-02-11
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表示。
2016-02-09
這個。。。其實
示例代碼：
h1{font-size:8vw;}
如果視口的寬度是200mm，那么上述代碼中h1元素的字號將為16mm，即(8x200)/100
就是實際的尺寸占屏幕寬度的比例，15vw就是15%的大小，這樣總可以理解了呀。單位轉換就不多說了