網頁設計中各度量單位的比較

2021-01-09 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

網頁最新資訊

 > 

正文
網頁設計中各度量單位的比較

在網頁中對網頁元素的大小修飾除了數值大小外,還有就是度量單位的選擇了。不同的度量單位會有哪些不同的效果呢?首先我們了解下網頁設計中的各類單位及說明。

像素(px)

根據顯示器的解析度來確定長度,在web應用中多採用該單位;

點數(pt)

根據windows系統定義的字號大小來確定長度;

英寸(in)、釐米(cm)和毫米(mm)

根據顯示的實際尺寸來確定長度。此類單位不隨顯示器解析度的改變而改變;

12pt字(pc)

即windows系統定義的12字號大小為單位(1pc=12pt)。該單位前輸入的數字表示字號大小的倍數。如{font-size: 2pc;}表示文字大小為24pt;

以上單位均為定值,改變瀏覽器中瀏覽文字大小不會對應用這些單位的文字產生變化。

字體高(em)

表示當前文本的尺寸。如{font-size:2em}是指文字大小為原來的2倍;

字體x的高(ex)

表示當前字母「x」的高度;

%

是以當前文本的百分比定義尺寸。如{font-size:200%}是指文字大小為原來的2倍;

網頁中各度量單位的在網頁中的查看比較

以下為引用的內容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">
<!--
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
p {
    background-color: #EFEFEF;
    margin: 5px;
    padding: 4px;
}
.px12 {
    font-size: 12px;
}
.px14 {
    font-size: 14px;
}
.pt12 {
    font-size: 12pt;
}
.pt14 {
    font-size: 14pt;
}
.in1 {
    font-size: 1in;
}
.pc1 {
    font-size: 1pc;
}
.pc2 {
    font-size: 2pc;
}
.em2 {
    font-size: 2em;
}
.ex1 {
    font-size: 1ex;
}
.ex2 {
    font-size: 2ex;
}
.ex4 {
    font-size: 4ex;
}
.per2 {
    font-size: 200%;
}
-->
</style>
</head>

<body>


正常字體大小,12像素(px)的大小,14像素的大小


<p>正常字體大小,<span>12點數(pt)的大小</span>,<span>14點數的大小</span></p>
<p>正常字體大小,<span>1英寸(in)的大小</span>,</p>
<p>正常字體大小,<span>12點數(pt)的大小 </span>= <span>1個12pt字(1pc)的大小</span>,<span>2個12pt字(2pc)的大小</span></p>
<p>正常字體大小,<span>2個字體高(em)的大小</span></p>
<p>正常字體大小,<span>cnbruce-ex1</span>,<span>cnbruce-ex2</span>,<span>cnbruce-ex4</span></p>
<p>正常字體大小,<span>200%的字體大小</span></p>
</body>
</html>

相關焦點

  • 光速和度量衡單位,誰定義誰?答案藏在度量單位的發展史中
    (「milia」在拉丁語中表示「千」)英國人在中世紀後期發展了一套度量標準體系,確定了幾種度量單位例如大麥長度,英寸,手長,腳長,英尋,杆長,費隆,英裡等之間的換算關係。所有的度量單位都被定在單獨的一個標準碼內,一根按照此標準製作的長棍被存放在倫敦塔內。幾個世紀過去了,此標準碼的複製版被製作並分配至當地,稱為當地的的度量標準。
  • 這些奇葩的度量單位
    如果1磅等於16盎司,等於7000格令,換算成公制單位大概是453.59克,貌似比長度單位看起來順眼。但盎司分為三種:液體盎司用來計算液體的容量,常衡盎司用來計算物體的重量,金衡盎司用來計算貴金屬的重量。而12金衡盎司卻等於1磅,很多外國人數學不好,看來情有可原。得利於秦始皇統一度量衡,中國在秦朝的時候就有了度量標準。
  • 度量衡單位換算器 v1.8
    度量衡單位換算器介紹  全功能度量衡單位換算器  目前最齊全好用的單位轉換應用,超過53種分類,1025種單位換算,公制、英制、美制單位全面囊括。  √ 53種分類  √ 1025種單位  √ 全高清設計  √ 退位按鈕  √ 簡單易用
  • Web設計教程:網頁設計中的對比原則
    網頁設計是由很多個不同的元素構成的, 而這些元素的重要性都不同, 並且有些元素還需要尤為的突出.有些元素彼此之間存在著聯繫,而另外的元素之間則 一點關聯性都沒有.比較難辦的部分就是如何有效的在視覺上來傳遞元素之間的關係.這就該用到對比原則了.
  • 網頁設計的黃金比例
    ,雖然現在很多人傾向使用Grid css框架(如960,blueprint),但有時也需要設計一些獨特的布局本文我們要探討如何將黃金分割理論運用到網頁設計中,大部分涉及到的技術也同樣適用於其他的設計或藝術類工作,當然主要還是針對於網站設計布局。
  • 網頁設計中Meta標籤詳解
    META的強大功效,一個好的META標籤設計可以大大提高你的個人網站被搜索到的可能性,有興趣嗎,誰我來重新認識一下META標籤吧!2、Refresh (刷新) 說明:讓網頁多長時間(秒)刷新自己,或在多長時間後讓網頁自動連結到其它網頁。
  • UI設計CSS網頁基本單位知多少?奇酷學院告訴你
    想要成為一名合格的前端工程師,會寫頁面絕對不能少,而如果想要頁面寫得出彩,你必須要知道一些網頁常用的基本單位。在傳統的項目開發中,我們常常會用到px、%、em這幾個單位,因為它能適用於大部分的項目開發,而且擁有比較良好的兼容性。但素,你造嗎?
  • 直播燈光中關於光的度量
    光度學是研究光的科學,現時,得益於科學的發展與進步,算是比較系統,完整的科學。那麼光的度量有那一些組成,才勾勒出光的一些輪廓呢?
  • 網頁設計布局包括哪些類型?
    建站離不開網頁設計,而網頁布局則是重中之重,其實布局可以說是一個網站的基礎,網頁設計布局是為了吸引用戶和提高網站的用戶體驗。在進行網頁設計布局時網頁內容是需要進行有機整合和分布的,以此來達到某種視覺效果。而設計網頁的目的不同,就有不同的網頁布局,那麼網頁設計布局都包括哪些類型呢?
  • 網頁設計中的彩色濾鏡效果
    在當今這個充斥著先進的特效和精妙風格的世界中,誰曾料到,像純色和漸變這樣簡單的手法,竟能夠催化出創造力,並極大提升網站的美學水準?現代網頁設計師們,證明了優雅的插畫、精緻的圖形和壯麗的照片,都能在彩色濾鏡效果下很自然地得到強調。氣氛煥然一新,網站開始變得光彩奪目。的確,它有助於解決某些問題。首先,彩色濾鏡能給網站耳目一新的外觀,卻不會增加負擔 。其次,它通過搭配傳遞各種情緒的色彩,很好地豐富了設計。
  • 為什麼說英制度量衡是世界上最差的度量衡系統
    全世界除了美國、緬甸和利比亞3個國家官方使用英制度量衡系統外,大多數國家都使用公制度量衡。儘管本文作者身處美國,每天都需要在英制度量衡和公制度量衡之間進行不停切換,早已習慣了兩種度量衡,但是比較下來還是覺得公制度量衡更具有優勢,畢竟不是每個人都了解在英制度量衡單位中還有1 shatments。
  • 網頁設計中美麗的字體組合25新鮮的例子
    印刷術是設計的一個非常重要的部分,為您的設計選擇合適的類型可能是非常具有挑戰性的。從印刷到網頁布局,排版是一個很好的設計的中心,今天我們收集了一些美麗的字體組合在網頁設計的例子來激勵你。在網頁設計中,排版可以採用不同的形式,大膽的標題,簡潔的菜單,說明文字等等。
  • 從日本設計機構看日本的網頁設計文化與趨勢
    近期awwwards網站整理一系列來自日本的設計機構網站,從這些設計工作室/機構所出品的設計項目可以看出目前日本的網頁設計文化和趨勢,歐美網頁一般以簡約為主,然而日本的網站卻比較複雜,比如樂天商城日版與國際版,整體相差很多。
  • 網頁設計中如何配色?感受不一樣的視覺盛宴
    網頁視覺體驗主要是由形式(或叫布局)、色彩、圖片和文字信息組成,共中色彩主要指的就是色彩的搭配和運用。頁面設計需要考慮和搭配的是頁的顏色而不是同片的顏色,所以我們可以將整個頁面當做一個畫布,然後對需要的部分進行色彩填充,使其看起來即實用又美觀。
  • 在網頁設計中,圖片常用的五點技巧
    圖片在網頁中所扮演的角色越來越重要。作為最常見也是最早使用的網頁多媒體,圖片對於網頁設計師而言至關重要。如何用好圖片已經成為了一項成熟、完善而又講究的技巧,而在高清屏幕無處不在的今天,稍有瑕疵的圖片都在高密度的像素下無所遁形,而不合理的圖片設計也不會逃過訪客的雙眼。
  • 網頁布局設計與色彩搭配
    網頁是網站構成的基本元素,精彩的網頁離不開網頁設計。在網頁設計的眾多環節中,頁面布局和色彩搭配是重要的環節之一。 1. 網頁的布局類型。 在網上瀏覽能看到許多精美的主頁和布局。
  • 國際千克單位標準將改為基於普朗克常數度量
    因此國際單位(SI)委員會決定淘汰千克原器,在今年10月21日召開的第24屆國際計量大會上,同意用一個基於普朗克常數的固定值來代替「千克」。普朗克常數用字母「h」來表示,相當於兩個粒子能夠交換的最小能量包或稱量子。大會還表示,在2014年之前「將不會採用這一常數」,此之前還將通過實驗評估測量技術的精確性,以確保精確度在億分之二以內。
  • 中國古代度量衡單位換算和來歷都在這兒了
    中國古代度量衡名稱多,早期制式多樣,後期又有幾次改制,是個挺複雜的體系,但是追根溯源,都跟兩樣東西有關:一個是農業,另一個竟然是樂器。首先說,度量衡是說了三個東西:度:長度的標準量:體積標準衡:重量標準理工男一看,馬上就不幹了----體積不就是長度的衍生嘛,這不科學啊。
  • 度量單位一公頃是什麼概念 一公頃等於多少平方米?
    度量單位一公頃是什麼概念 一公頃等於多少平方米?時間:2018-03-30 10:54   來源:三聯   責任編輯:沫朵 川北在線核心提示:原標題:度量單位一公頃是什麼概念 一公頃等於多少平方米? 從小學數學開始開始,我們就開始接觸了數學的各種單位,面積等等。換算他們的等值是多少。
  • 風暴英雄統一度量衡 這些英雄單位你知多少?
    由於風暴英雄的英雄多(qiang)樣(ruo)性太大,於是玩家們為了方便比較,自創出一套完善的風暴英雄英雄對比專用度量衡,而是哪些幸運兒被選中了呢?今天上野君就跟大家一一介紹。首先第一位重量級英雄:英雄強度單位——雷諾眾所周知雷諾算是星際爭霸的第一男主角,當他來到時空樞紐後,強大的作戰能力使得雷諾成為了無數英雄的噩夢(/滑稽),而且雷諾也屬於風暴英雄的早期元老之一,以至於後來大家都習慣用雷諾為單位來形容一位英雄強度。舉例:「龍騎士菲尼克斯的強度是2雷諾。」請問: 2個菲尼克斯的強度為幾雷諾?