最近在學習小程式,要把html的代碼轉換成小程式界面,其中就遇到了rem的轉換問題,但小程式不太相容rem,不是不能用rem,而是沒辦法設置根元素的font-size,因為rem是相對於根元素的font-size,而小程式的根元素font-size一直是16px。既然我設置了page{ font-s ...
最近在學習小程式,要把html的代碼轉換成小程式界面,其中就遇到了rem的轉換問題,但小程式不太相容rem,不是不能用rem,而是沒辦法設置根元素的font-size,因為rem是相對於根元素的font-size,而小程式的根元素font-size一直是16px。既然我設置了page{ font-size:1px }也不起作用,那要怎麼實現rem呢
這裡我用css變數來實現偽rem,定義一個css變數--app-rem-size,然後在各個屏幕尺寸中定義--app-rem-size大小值;
以下是app.wxss文件
page{ --app-rem-size:10px; font-size:calc(var(--app-rem-size)*1.2); } @media screen and (min-width: 320px) and (max-width: 359px) { page { --app-rem-size: 10px; } } @media screen and (min-width: 360px) and (max-width: 413px) { page { --app-rem-size: 12px; } } @media screen and (min-width: 414px) { page { --app-rem-size: 14px; } }然後在我需要用到rem的地方,比如 height:calc(var(--app-rem-size)*2) 這樣使用,雖然有點麻煩,但也是沒辦法中的辦法了。