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

jkyin 發布于2019-08-01 17:01 / 2356人閱讀

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

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

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




      
      測試rem

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

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

html{font-size: 625%;}

或者

html{font-size:100px;}

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

云服務器 GPU云服務器 Quote quoted quot python b&quot&quot

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50898.html

the-clean-architecture

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

社區管理員 2022-10-08 14:15 評論0 收藏0
Spring事務&分布式事務&單服務處理多數據源事務

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

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

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

booster 2019-08-30 12:56 評論0 收藏0
關于云原生應用程序你需要知道的 6 件事

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

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

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

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