最近在學習小程式，要把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) 這樣使用，雖然有點麻煩，但也是沒辦法中的辦法了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108286.html
標籤：Html/Css
上一篇：打開檔案報“EFailed to load resource: net::ERR_FILE_NOT_FOUND”錯誤