前提:vue+iview做後臺管理系統
需求:頁面一行有固定的4張卡片,每張卡片裏有圖片,圖片是從後臺系統中上傳的,大小不固定,要卡片中的圖片高度隨着屏幕大小自適應
小屏幕效果:
大屏幕效果:
解決方法有兩種:
1. 利用@media媒體查詢做。
① 在index.html中加入meta標籤 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
② 在當前頁面中給圖片對應盒子在不同屏幕尺寸下給不同的高度
2. 用原生js的方法,獲取到當前卡片的寬度,當改變屏幕大小時用獲取到的寬度根據設計圖乘以一個寬高比例(美觀好看就行),最後把計算得到的值動態設置高度樣式
data數據:
注意:這裏需要注意的是設好後,有時候拖動屏幕改變大小時會報錯或者不會實時變化,要把結構裏渲染卡片的數組對象,初始化時就要設成數組對象形式[{}],因爲在頁面初始化時可能沒有數據,所以頁面渲染時獲取不到dom結構
結構:
方法和鉤子函數: