近年來,微信小程序在開發中越發流行,隨之而來的也就是對于小程序的開發技術的進一步研究和發展。而今天我們就來談談小程序中的wxss與css的區別。
wxss樣式: .tag{ color:#333; font-size:14rpx; }
css樣式: .tag{ color:#333; font-size:14px; }
首先,從寫法上來看,wxss的樣式最大的改變就是單位。小程序中使用的是rpx(responsive pixel)做為長度單位。
rpx可以根據屏幕寬度進行自適應縮放,因此在不同設備上顯示效果是一樣的。實際上rpx相當于wxss中用px做單位的1/2,即1rpx=0.5px。
接下來,就是選擇器上的不同。小程序中不能使用一些常規的選擇器如“*”,“:before”,“:active”,“:hover”等等。只能使用一些特定選擇器,如類選擇器、id選擇器、后代選擇器等。
而且還需要注意的是在小程序中,可以使用樣式導入,但導入路徑是相對路徑,不能使用“/”開頭表示根目錄。同時,小程序中的wxss樣式也不存在瀏覽器兼容的問題。
最后,在開發中,可以使用第三方的UI框架如Vant Weapp等來實現優秀的視覺效果。
總的來說,wxss與css的區別主要在單位使用上的不同,以及在選擇器上的限制與使用的路徑問題。當然,開發者在使用中也要遵循小程序的規范,才能順利地完成開發工作。