學習CSS了解單位em和px的區別

2021-01-19 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

最新資訊

 > 

正文
學習CSS了解單位em和px的區別

這裡引用的是Jorux的「95%的中國網站需要重寫CSS」的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字體,所以無法用瀏覽器字體放大的功能,而國外大多數網站都可以在IE下使用。因為

1、IE無法調整那些使用px作為單位的字體大小;

2、國外的大部分網站能夠調整的原因在於其使用了em作為字體單位;

3、Firefox能夠調整px和em,但是96%以上的中國網民使用IE瀏覽器(或內核)。

px像素(Pixel)。相對長度單位。像素px是相對於顯示器屏幕解析度而言的。(引自CSS2.0手冊)

em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)

任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em有如下特點:

1、em的值並不是固定的;

2、em會繼承父級元素的字體大小。

所以我們在寫CSS的時候,需要注意兩點:

1、body選擇器中聲明Font-size=62.5%;

2、將你的原來的px數值除以10,然後換上em作為單位;

3、重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em,那麼在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變為了1em=12px。

但是12px漢字例外,就是由以上方法得到的12px(1.2em)大小的漢字在IE中並不等於直接用12px定義的字體大小,而是稍大一點。這個問題 Jorux已經解決,只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時,對於浮點的取值精確度有限。不知道有沒有其他的解釋。

相關焦點

  • CSS26-1什麼是em單位
    瀏覽器效果如下:那麼這個 50em 究竟具體是多寬了?帶著這個疑問,我們來測試一下。我們給 類名為div2 的容器設置了一個寬度值 800px瀏覽器效果如下:這是因為:em 的具體大小是它父元素字體大小的倍數瀏覽器默認的字體大小一般為16px這裡
  • 常用長度單位PX/EM/PT/百分比轉換公式與對照表
    PX、PT、EM、ex和in等都是我們常用的長度單位,尤其在網頁的字體大小中經常用到。但是你知道PX、PT和EM之間是如何進行準換的嗎?這裡icech為大家找到了一個px、pt、em和percent大小轉換的一個表格,尤其針對字體大小的轉換十分方便。希望大家能夠喜歡!
  • UI設計CSS網頁基本單位知多少?奇酷學院告訴你
    想要成為一名合格的前端工程師,會寫頁面絕對不能少,而如果想要頁面寫得出彩,你必須要知道一些網頁常用的基本單位。在傳統的項目開發中,我們常常會用到px、%、em這幾個單位,因為它能適用於大部分的項目開發,而且擁有比較良好的兼容性。但素,你造嗎?
  • CSS常考知識點
    2.2 布局常用單位面試官:請列舉一下我們css布局常用的單位及區別(基礎題)px:絕對單位,頁面按精確像素展示%:相對單位,根據父容器進行百分比計算em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size
  • 網頁設計中各度量單位的比較
    不同的度量單位會有哪些不同的效果呢?首先我們了解下網頁設計中的各類單位及說明。像素(px)根據顯示器的解析度來確定長度,在web應用中多採用該單位;點數(pt)根據windows系統定義的字號大小來確定長度;英寸(in)、釐米(cm)和毫米(mm)根據顯示的實際尺寸來確定長度。
  • CSS基礎—文字的尺寸、字體、行距及顏色
    font-size(尺寸)font-size樣式用於設置文字大小,單位有px(像素)、 em(相對值,以父元素的大小為基準單位)、rem(相對值,以根元素的大小為基準單位)。px的英文全稱是Pixels,中文名稱為像素,手機屏幕的解析度就是以像素為單位的,因此它是一個物理單位。使用px為單位的樣式會隨著顯示設備解析度的不同而發生大小變化。
  • Meta CSS框架發布
    Meta CSS框架的實現參考了不少大型站點的css代碼,分析代碼裡的共性而總結出來的,該框架可以整合yui css框架或者blueprints框架來使用。它的作用在於以一個明確的命名規則,提供一個通用的css類集。正如這個框架的名字Meta,它規劃出最小的最通用的"元定義"。可以與目前了解的各類css框架共存。
  • HTML5+CSS+JS時間
    html,外觀修飾美觀與否就和css有關了,當然JS可能用的更多,再就是還可能用到css,js設計的框架.功能的多寡,比如造型酷炫,動態特效,多半都是JS來實現的,這裡我寫了一個博客的登錄界面(沒有設密碼,界面綠色按鈕就能進入博客,進入後用的java來實現的時間流動),圖片什麼的因為是別人的這裡就不上了,先上原始碼,我寫的代碼很簡單很容易應該就能看懂.
  • 全面掌握CSS基本知識點
    ,10px) translate:translateX(20px) translate:translateY(30px) 3) scale 縮放 transform-origin:50% 50% //定義縮放基點 translate:scale(20px,10px) translate:scaleX(20px) translate:scaleY(30px)複製代碼因為可能有些瀏覽器不兼容這些屬性,所以需要加上瀏覽器前綴
  • 前端Web開發人員的CSS相對字體大小
    在本文中,我們將闡明這些單位的用法和任何誤解。PX Unit最常見和最受歡迎的單位是像素(像素)單位。大多數人開始使用像素單元,因為它可以讓您 完全控制文字大小。如果未指定字體大小,則正常文本的默認大小(如段落)為16px。使用像素單元的主要問題在於它們不具有可伸縮性,因此在不同屏幕尺寸下對字體大小進行更改可能具有挑戰性。
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性,也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種,靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式,不能使用top,bottom,left,right和z-index屬性,其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • 輕輕鬆鬆學CSS:position
    沒有家長的管教,他無組織、無紀律,是典型的獨行俠,因此學習他就相對簡單(「相對簡單」是指在html、css中牽扯因素少),先學簡單的符合讀者的認知規律。現在,讀者對fixed還沒有一個具體的感知,先舉個簡單的例子-浮動廣告,代碼如下:1<!
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    , react生態的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發一個項目的成本和複雜度,使開發者更專注於實現業務邏輯和服務化.偽代碼如下:.xButton {position: relative;overflow: hidden;display: inline-block;padding: 6px 1em;border-radius: 4px;color: #fff;background-color: #000;
  • div+css定位技術之相對定位和絕對定位
    Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title><styletype="text/css
  • 常見的CSS文字居中顯示
    1、利用line-height和vertical-align
  • 用css配合HTML代碼製作導航條下拉麵板
    首先我們來看看下拉麵板的效果吧,這個事稍微複雜一點的下拉麵板,我們會一步步為您講解,如何製作出這樣一個下拉麵板,但前提是你需要了解CSS的定位知識和HTML代碼,因此沒有這些基礎的同學要先學一下HTML代碼和CSS(層疊樣式表)的知識。
  • CSS3 transform之scale縮放|transition之過渡動畫調整手記
    既然是滑鼠移上去後再發生變化,那首先需在css文件中,針對圖片的hover增加個樣式,縮放比例為1.1。如下紅色為增加的transition部分:.index-list-tu li a img {width: 230px;height: 145px;border-radius:3px;float: left;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;}如此追加了,這個針對圖片的平滑的微動效就有了
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    下面我們將父元素和子元素在頁面上呈現一下,可清楚的認識它們:圖3B:如果父元素使用了position屬性,則子元素使用了position=「absolute」, 子元素的top/left/right/bottom的值是相對於父元素定位的。
  • 需要掌握的八個CSS布局技巧
    所以margin:0 1px 3px 5px;的結果是上方無邊界,右邊1像素,以此類推。記住「TRouBLe」,您就不會弄錯次序了。  8.只要不是零的值,都要指定單位  CSS需要您對每個font,Margin等各種值指定單位。