關於rem的相容方案

2021-10-01 19:50:28 字數 445 閱讀 9333

我們的設計圖是1920*1080(px)

關於rem的官方解釋,大家可以自行搜尋。我的理解是,html標籤設定乙個基數。比如設計圖中間的操作區域是1690px,那麼我設定font-size:16.9px; 那100rem=1690px。在設計之前最好和設計師溝通好,讓設計的寬度、間距、高度等,按照乙個基數進行設計。這樣你進行rem轉換的時候,可以口算出來。不然所有的轉換rem都需要用公式計算,只是為了方便。

1.hbuilder x 這個開發軟體很好用,可以在你輸入px的時候,提示你對應的rem值是多少。

重點:我們需要根據設計圖的比例,來設定html的font-size 基數計算

$(function());

});

這段**的意思就是,獲取螢幕的可視畫素。然後根據你的設計圖寬度進行比例計算。然後得到的比例和我們的基數進行計算,得到該螢幕下的基數。

rem方案原理 rem的具體用法

一 rem方案原理 將每個不同螢幕劃分相同的等分,讓同乙個元素占有相同的比例 例如 螢幕為500px,分為10份,那麼乙份是1rem 50px 螢幕為1000px,分為10份,那麼乙份是1rem 100px 二 用法 在瀏覽器中預設的字型高度是16px,預設是1em 16px 16 62.5 10p...

關於移動端rem適配的相關方案研究

1.移動端的相關適配目前探索中已經尋找了很多種的適配方案,1 響應式布局。2 640px 750px做一版移動端的設計圖 em適配 3 640px 750px做一版移動端的設計圖 rem適配 以上方案實際開發中本人都已經使用過,後來最終選擇第三種方案。為什麼呢?第一種響應式方案,看似簡單,實際開發中...

Rem設計方案

作為font size的單位時,其代表父元素的字型大小,作為其他屬性單位時,代表自身字型大小 問題 1 chrom下有最小字型限制,必需為12px,所以這個值不能小於12 2 如果兩個一樣的元素,但是裡面字型不一樣,那就不能統一設定了。或者元素字型變化了,就又要統一設定一遍 css3新增的乙個相對單...