利用vw做rem適配(純css)

vw:相對于視口的寬度。視口被均分為100單位的vw;
我在想,既然vw是相對于視口的寬度,又因為視口的寬度是不固定的,那么可以用vw來做到rem適配嗎?
下面是測試的截圖:
(如果是用手機看的,因為自動把圖片縮放了,所以看著字體大小一樣)


![測試寬度一]
測試寬度二

還有個問題,就是應該有個px與vw的換算比例吧,我又看了看。
假如ui圖的寬度為1920px,又因為vw會把寬度分為100份,那1vw=19.2px,1920/100=19.2(px),現(xiàn)在這樣還是不行,不好算,那就算出每100px是多少vw,(100/19.2)*1=(約等于)5.21(vw),這樣,設根字體html為5.21vw,則0.18rem=18px
ok,還不錯,那么,如果要應用到項目中,因為是前端嘛,肯定要考慮到兼容性問題,以下是vw對瀏覽器的兼容:

兼容性

簡友們可以根據(jù)自己的需求來選擇。
但畢竟現(xiàn)在這個還不夠成熟,應用到實際項目中還有待觀察,應該算筆者自己的一個頭腦風暴吧 ^_^

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,108評論 1 92
  • 響應式布局的實現(xiàn)依靠媒體查詢( Media Queries )來實現(xiàn),選取主流設備寬度尺寸作為斷點針對性寫額外的樣...
    iyimao閱讀 567評論 0 0
  • 什么是Rem rem和em很容易混淆,其實兩個都是css的單位,并且也都是相對單位,現(xiàn)有的em,css3才引入的r...
    tobAlier閱讀 28,123評論 2 38
  • 在移動互聯(lián)網(wǎng)快速發(fā)展的今天,手機的種類和尺寸越來越多,作為前端的小伙伴們可能會越來越頭疼,但又不得不去適配一款又一...
    keenjaan閱讀 27,206評論 9 86
  • 上一章 5 天眼穆惜凡明白自己雖然位居郁單國的天元帝女,卻完全不知自己能做什么,如果貿(mào)然行事,怕以后會更不好混。淵...
    要飯團閱讀 377評論 0 0

友情鏈接更多精彩內容