那些年被"62.5%"欺騙過(guò)的rem

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

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

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

怎么設(shè)置rem
很多人知道在根節(jié)點(diǎn)設(shè)置，也就是 html{font-size:62.5%;} 就可以了。我不知道是誰(shuí)一開(kāi)始就這么說(shuō)的。但我知道這個(gè)人也太不負(fù)責(zé)任了。為什么呢？因?yàn)楣雀柚辉试Sfont-size最小是12px.




      
      測(cè)試rem

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

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

html{font-size: 625%;}

或者

html{font-size:100px;}

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50898.html

相關(guān)文章

the-clean-architecture

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

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

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

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

摘要：，返回的最大值。非相同的單位，報(bào)錯(cuò)編譯為，返回一個(gè)隨機(jī)數(shù)。函數(shù)函數(shù)稱(chēng)為三元條件函數(shù)，主要因?yàn)樗椭械娜袛喾浅５南嗨?。顏色函?shù)暫時(shí)還沒(méi)用到過(guò)。函數(shù)，根據(jù)三個(gè)值創(chuàng)建一個(gè)顏色將一個(gè)顏色根據(jù)透明度轉(zhuǎn)換成顏色。前戲：前幾篇文章其實(shí)都是些基礎(chǔ)必備的，什么變量、繼承、占位符、混合宏...這回來(lái)高級(jí)點(diǎn)的，玩玩Sass 自帶的一些函數(shù)...有字符串函數(shù)(String Functions)、數(shù)字函數(shù)...

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

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

917591759 2022-09-22 17:17 評(píng)論0 收藏0
淺談px,em與rem

摘要：關(guān)于表示像素計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)，是絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓P(guān)于任意瀏覽器的默認(rèn)字體高都是。有如下特點(diǎn)的值并不是固定的會(huì)繼承父級(jí)元素的字體大小。避免字體大小的重復(fù)聲明。所有未經(jīng)調(diào)整的瀏覽器都符合。關(guān)于px px表示像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)：1px = 1/96in)，是絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?關(guān)于em 任意瀏覽器的默認(rèn)字體高都是16px。所...

Yujiaao 2019-08-29 12:25 評(píng)論0 收藏0