手把手教你拿捏vue cale()計算函數使用
前言
最近項目中遇到calc()方法不生效問題,本著究其所以然的想法,徹底查瞭一下calc的方法及使用,還有為什麼項目中使用不生效的問題,最後總結出此文,解決方法放在結尾瞭
cale()是什麼
calc是英文單詞calculate的縮寫,其實主要用於對項目中一些單位的計算,這裡的計算是在calc()函數裡面填充表達式去計算,它會返回具體的值
基本使用
平常我們項目中遇到最多的就是一些普通計算瞭比如:
<body> <div class="content"></div> </body> // style .content{ height: calc(100% - 32px); }
這裡計算出來的就是頁面減去32像素單位的高度,如果父盒子有高度,這個100%就是繼承父盒子的高度
<div style="height: 200px"> <div class="content"></div> </div> // style .content { background-color: #6b3434; height: calc(100% - 100px); }
除瞭加減法calc()還支持乘除,乘除法要求必須要有一個參數是數字,而且除法的右邊參數必須是數字;加、減、乘、除('+'、'-'、'*'、'/'、),乘除法的運算規則也是一樣的會先運算乘除再算加減,所以我們不需要刻意的使用括號去包裹,但是如果你是需要先運算加減則要先用括號進行包裹
靈活使用
calc()除瞭這些用法還有一些比較靈活用法:
// 計算屬性裡面 newWidth:{ // data裡設置一個menuWidth變量來操控width的大小 return width: `calc(100% - ${menuWidth}px)` }
還有比如我這篇旋轉方塊裡面的每一個點的旋轉用到的就是css中的自定義屬性來運算,運用style中的–i屬性來控制變量,從而減少我們大量的css去計算的代碼
transform: rotate(calc(30deg * var(--i)));
而且calc()還支持混合單位運算,在參數單位不同時,會做預處理比如:
// turn 代表一個圓的圈,1turn就是一圈 // deg 代表角度45deg就是45度 transform: rotate(calc(1turn + 45deg))
而且calc()支持很多單位:'px,%,em,rem,vw,vh,cm,pt,pc,vmin,vmax,vh'等
註意
calc()表達式的參數一定要用空格隔開,並且也是支持負數計算的,而且calc()不支持媒體查詢哦!!
// 本身寫法 @media (max-width: 600px) { } // 不支持的calc寫法 @media (min-width: calc(400px + 200px)) { }
兼容性
結尾
本人項目中使用的less預處理器,所以在使用calc()時會和less的一些語法有沖突,所以官方推薦使用 '~' 來進行轉譯這是官方文檔
以上就是手把手教你拿捏vue cale()計算函數使用的詳細內容,更多關於vue cale()計算函數使用的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 如何在CSS中繪制曲線圖形及展示動畫
- 使用JavaScript實現響應式計數器動畫
- 使用Three.js和React把冰墩墩部署在網頁上的實現方法(實現人手一墩)
- Vue標尺插件使用詳解
- vue2實現簡易時鐘效果