小程式如何實現rem

来源:https://www.cnblogs.com/caijt/archive/2019/11/12/11843243.html
-Advertisement-
Play Games

最近在學習小程式,要把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) 這樣使用,雖然有點麻煩,但也是沒辦法中的辦法了。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基本選擇器介紹 基本選擇器又分為六種使用方式:如、通用選擇器、標簽選擇器、類選擇器、Id選擇器、結合元素選擇器、多類選擇器。 基本選擇器使用說明表。 選擇器 | 語法格式 | 含義 |舉例 | | | 通用選擇器 | {屬性:值;} |通用選擇器可以選擇頁面上的所有元素,並對它們應用樣式,用 來表示 ...
  • CSS浮動 1. 傳統網頁佈局的三種方式 網頁佈局的本質——用來CSS來擺放盒子。把盒子擺放在相應的位置 CSS提供了三種傳統的佈局方式: 普通流(標準流) 所謂的標準流,就是標簽按照規定好預設方式排列 塊級元素會獨占一行,從上向下排列 常用元素:div、hr、p、h1~h6、ul、ol、dl、fo ...
  • HTML HTML簡介 HTML(Hyper TextMarkupLanguage) 超文本標記語言。 超文本: 超越了文本僅僅展示信息的功能範疇,泛指:圖片、有樣式的文字、超鏈接。 標記: 標簽。 語言: 工具。 HTML是由標簽所組成的語言,能展示超文本的效果。 HTML的語言特征 HTML代碼 ...
  • Hello大家好,今天小主開啟了自己的博客,還請多多瀏覽和分享 ...
  • 解構的作用:簡化書寫長度,提升開發效率。 解構對象 在開發中我們常用到使用ajax請求數據,並且把數據渲染到頁面上。可能這個數據返回的對象或數組。例如返回一個obj{name:'zwq',age:18,sex:woman}而我們獲取裡面的值保存在變數里會用 var name = obj.name,v ...
  • [TOC] 前端 什麼是前端 任何與用戶直接打交道的操作界面 都可以稱之為前端 eg:電腦界面 手機界面 平板界面 什麼是後端 真正的幕後操作者 web服務的本質 請求 響應 瀏覽器輸入網址 回車發生了哪些事 1.朝著指定的伺服器地址發送請求 2.服務端接收請求 並處理 3.返回相應的響應 4.瀏覽 ...
  • 1.先用vue-cli3創建一個項目 2.安裝element模塊 全局安裝 npm i element-ui -S 3在main.js引入模塊 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.c ...
  • 如何用javascript獲取input輸入框中的值,js/jq通過name或id獲取輸入框value值 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...