iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

Daily UI : 開發者版系列 第 29

Vuetify:Google YoutubeMusic › Static Layout

https://codepen.io/hereiscasio/pen/VwZRmwy?editors=1010

Used UI Component ( #1 )

Aspect ratios

UI 圖來源見

Discussion

<v-responsive :aspect-ratio='5/4'>
    <div class="media__phone"><img :src="URL_IMAGE"></div>
</v-responsive>

Google YoutubeMusic 把網頁中的某部分強制等比例,也就是不管怎麼調整瀏覽器寬度,該部分仍呈現某種比例( 見上圖 ),此處為 330 : 264 = width : height = 5 : 4 = 5/4,而這個 "強制把某東西的寬高保持在某種比例",可以透過 Aspect ratios 實現( 順帶一提,本日範例有稍微做一點點響應式設計 )

上圖的手機以及手機上方的紅色圖案,其實就是透過在 .media__phone 中置放背景圖,然後把該紅色圖案以 img 標籤漂浮於其上,這種蠻 tricky 的處理手法( 雖然在這個時代已不 tricky ),你就別想用 Vuetify 達成了,或許硬幹可能做得到,但我想會得不償失( e.g. 加很多 hack CSS )都已經到第 29 天,你應該能理解 Vueitfy 不是來幫你做這種事的,當然官方之後要是把此功能加到某元件、開發出一個底層元件專門幫你做這件事( 以我的過去的通靈經驗,照他們的發展脈絡來看,我是覺得不太可能搞這種東西 . . . ),那是另一回事


上一篇
Vuetify:Google Contact
下一篇
Vuetify:Google YoutubeMusic › Advanced Implementation
系列文
Daily UI : 開發者版30

尚未有邦友留言

立即登入留言