那些年被"62.5%"欺騙過的rem

jkyin 發(fā)布于2019-08-01 17:01 / 2361人閱讀

摘要：為了解決這個問題，救星出現(xiàn)了。為什么呢因為谷歌只允許最小是測試按網(wǎng)上那些人的道理，兩個本應(yīng)該一樣寬的。但是呢，現(xiàn)實是這個樣子的實際上你用谷歌是跟下圖，但用萬惡的打開是藍(lán)色比較短，火狐是一樣長。而且火狐谷歌等等瀏覽器都兼容的。

前言
有過移動端開發(fā)經(jīng)驗的人都知道，ios跟android頁面的 像素(px)密度 不一樣。這就有點尷尬了，因為在android這邊一個div 180px剛剛好，但是去了ios那邊可能就不一樣了，可能會造成頁面變得扭曲。
為了解決這個問題，救星——rem出現(xiàn)了。它的值默認(rèn)是1rem == 16px,這樣子的話計算起來就不是很方便了。所以很多人喜歡把它設(shè)置成1rem == 10px。10/16就是 0.625。我們的主角出現(xiàn)了！

怎么設(shè)置rem
很多人知道在根節(jié)點設(shè)置，也就是 html{font-size:62.5%;} 就可以了。我不知道是誰一開始就這么說的。但我知道這個人也太不負(fù)責(zé)任了。為什么呢？因為谷歌只允許font-size最小是12px.




      
      測試rem

按網(wǎng)上那些人的道理，兩個div本應(yīng)該一樣寬的。但是呢，現(xiàn)實是這個樣子的......（實際上你用谷歌是跟下圖，但用萬惡的IE打開是藍(lán)色比較短，火狐是一樣長。）各個瀏覽器還不一樣，這很是尬尷啊！

如何正確設(shè)置rem的大小
還是在根節(jié)點設(shè)置，但代碼就要改成這樣了。

html{font-size: 625%;}

或者

html{font-size:100px;}

不過現(xiàn)在的1rem 是等于 100px，但是整的倍數(shù)比較容易計算啊。而且IE、火狐、谷歌等等瀏覽器都兼容的。不會說在各個瀏覽器還長短不一樣，這種情況不存在的！

GPU云服務(wù)器云服務(wù)器 Quote quoted quot python b&quot&quot

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50898.html

相關(guān)文章

the-clean-architecture

過去幾年，我們已經(jīng)看到了一系列關(guān)于系統(tǒng)架構(gòu)的想法，包括：六邊形架構(gòu)（接口與適配器）洋蔥架構(gòu)(Onion Architecture)Screaming ArchitectureDCIBCE這些架構(gòu)有很多共同的點（思想），盡管它們細(xì)節(jié)上有所不區(qū)別,它們都有相同的目標(biāo)，那就是關(guān)注點分離（the speration of concerns）, 它們都是通過將軟件分層來實現(xiàn)這種分離，每個組件至少有一個用于業(yè)...

社區(qū)管理員 2022-10-08 14:15 評論0 收藏0
Spring事務(wù)&分布式事務(wù)&單服務(wù)處理多數(shù)據(jù)源事務(wù)

本文以一個實際業(yè)務(wù)問題來談?wù)勈聞?wù)該如何處理。對接外部系統(tǒng)是是不可避免的，從廣泛意義上來說，外部系統(tǒng)范圍很大，中間件（數(shù)據(jù)庫）也屬于外部系統(tǒng)。當(dāng)我們討論事務(wù)時，通常我們將那些沒有支持事務(wù)的系統(tǒng)稱為外部系統(tǒng)，業(yè)務(wù)系統(tǒng)基本上都是外部系統(tǒng)。問題有這樣一套系統(tǒng)，以gitlab為底層系統(tǒng)，在gitlab project的基礎(chǔ)上封裝了代碼倉，系統(tǒng)對其中一些與gitlab關(guān)聯(lián)的數(shù)據(jù)進(jìn)行了落表。創(chuàng)建代碼倉的邏輯過...

社區(qū)管理員 2022-10-08 13:56 評論0 收藏0
CSS外掛：Sass的那些裝逼函數(shù)(function)

摘要：，返回的最大值。非相同的單位，報錯編譯為，返回一個隨機(jī)數(shù)。函數(shù)函數(shù)稱為三元條件函數(shù)，主要因為他和中的三元判斷非常的相似。顏色函數(shù)暫時還沒用到過。函數(shù)，根據(jù)三個值創(chuàng)建一個顏色將一個顏色根據(jù)透明度轉(zhuǎn)換成顏色。前戲：前幾篇文章其實都是些基礎(chǔ)必備的，什么變量、繼承、占位符、混合宏...這回來高級點的，玩玩Sass 自帶的一些函數(shù)...有字符串函數(shù)(String Functions)、數(shù)字函數(shù)...

booster 2019-08-30 12:56 評論0 收藏0
關(guān)于云原生應(yīng)用程序你需要知道的 6 件事

#1。什么是云原生？根據(jù)您的要求，云原生可能意味著很多不同的事情。十年前，云原生一詞是由 Netflix 等利用云技術(shù)的公司創(chuàng)造的，從一家郵購公司發(fā)展成為世界上最大的消費者點播內(nèi)容交付網(wǎng)絡(luò)之一。 Netflix 開創(chuàng) 了我們所謂的云原生模式，重塑、轉(zhuǎn)變和擴(kuò)展了我們所有人都希望以何種方式進(jìn)行軟件開發(fā)。隨著 Netflix 的巨大成功及其更快地向客戶提供更多功能的能力，公司想知道云原生技術(shù)如何幫助 ...

917591759 2022-09-22 17:17 評論0 收藏0
淺談px,em與rem

摘要：關(guān)于表示像素計算機(jī)屏幕上的一個點，是絕對單位，不會因為其他元素的尺寸變化而變化關(guān)于任意瀏覽器的默認(rèn)字體高都是。有如下特點的值并不是固定的會繼承父級元素的字體大小。避免字體大小的重復(fù)聲明。所有未經(jīng)調(diào)整的瀏覽器都符合。關(guān)于px px表示像素 (計算機(jī)屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化關(guān)于em 任意瀏覽器的默認(rèn)字體高都是16px。所...

Yujiaao 2019-08-29 12:25 評論0 收藏0