網站設計中對px的理解_網頁設計中像素、PX與百分比的迷惑

1、網頁設計中上過界5px怎麼表示？

margin-top:5px

2、1024px寬的圖片怎麼在網頁設計中使用？

這個尺度可以了，適合17寸的顯示器及以上，要考慮到大多數用戶還在用17寸的

3、相比px而言，在響應式web設計中，em有何優勢

PX:
PX實際上就是像素，用PX設置字體大小時，比較穩定和精確。但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們製作的Web頁面時，如果改變了瀏覽器的縮放，這時會使用我們的Web頁面布局被打破。這樣對於那些關心自己網站可用性的用戶來說，就是一個大問題了。因此，這時就提出了使用「em」來定義Web頁面的字體。

EM:
EM就是根據基準來縮放字體的大小。EM實質是一個相對值，而非具體的數值。這種技術需要一個參考點，一般都是以<body>的「font-size」為基準。如TOPVE唯藝互動的基準就是16px=1em。
em有如下特點：
1. em的值並不是固定的；
2. em會繼承父級元素的字體大小。

另外，em是相對於父元素的屬性而計算的，如果想計算px和em之間的換算
1、任意瀏覽器的默認字體大小都是16px。
2、所有未經調整的瀏覽器都符合: 1em=16px 12px=0.75em 10px=0.625em
3、為了簡化font-size的換算，在body選擇器中聲明font-size：62.5%，這就使em值變為
12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。

以上就是TOPVE唯藝互動對於響應式網站設計中PX與EM優缺點的總結和整理。如果您還對此有疑問，可以到他們網站看看他們是怎麼使用EM和PX來進行網站設計的。

4、現在網頁設計中的為什麼少有人用 11px，13px，15px 等奇數的字體

UI設計師的原因
多數設計師用的設計軟體（如：ps）大多數都是偶數，所以前端工程師一般都是用偶數字體。
瀏覽器的原因
其一是為了遷就ie6，萬惡的ie6會把定義為13px的字渲染成14px，你可以寫個頁面試試還有一個原因是，偶數寬的漢字，比如12px寬的漢字，去掉1像素的間距，填充了像素的實際寬是11px，這樣漢字的中豎線左右是平分的，以「中」這個字為例，在12像素時，豎線在中間，左右各5像素，顯得均衡。
其二像谷歌一些比較流行的瀏覽器一般會有個默認的最小字體，而且對奇數字體渲染的不太好看
實際應用

偶數字型大小相對更容易和 web 設計的其他部分構成比例關系。比如：當我用了 14 px 的正文字型大小，我可能會在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的標題字型大小。
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），於是略顯稀疏。

5、在網頁設計中表示字體大小的怎麼寫呢，比如說18px

一般中文的字體大小是12px或者14px。隨著顯示器解析度不斷提高，12px的文字在大於1440*900的顯示器里看起來會顯得比較小，閱讀起來不是很容易，所以現在網頁設計裡面用12px的已經比較少了，特別是文章正文部分，普遍都會用14px。13px的字體在IE6下面會有一點點顯示上的bug，所以現在用得也不太多，不過隨著IE6慢慢被淘汰，這個問題也不再是一個問題了。而對於標題欄的文字大小，沒有特別的限制，視覺上感覺舒服就行。
字體大小代碼：font-size:14px（字體大小14像素）
對於font-family，一般來說14px及以下大小的文字，應當設置為宋體，當然也可以設置為微軟雅黑。不過在XP下默認是沒有雅黑字體的，所以在css裡面可以這樣設置字體：
font-family:"Microsoft Yahei",simSun,Arial;
把幾個字體用逗號隔開，如果系統沒有第一種字體，就用第二種，如果沒有第二種就用第三種，以此類推。

6、關於網頁設計尺寸和字型大小大小

html頁面中的文字大小在用戶瀏覽器下默認渲染是「16px",也沒有強行規定一定要用多大的，這個要看設計圖來定。

CSS上可以用"em"來替代「px」,em是一個相對的大小，我們可以這樣來設置1em，0.5em，1.5em等，而且「em」還可以指定到小數點後三位，比如「1.365em」。

為什麼要用em,而不用px的關鍵點：

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

2. 國外的大部分網站能夠調整的原因在於其使用了em作為字體單位；3. Firefox能夠調整px和em，但是96%以上的中國網民使用IE瀏覽器(或內核)。這意味這中國網站的字體大小可以被認為不可調。

(6)網站設計中對px的理解擴展資料：

網頁構成

文字與圖片是構成一個網頁的兩個最基本的元素。你可以簡單地理解為：文字，就是網頁的內容。圖片，就是網頁的美觀。除此之外，網頁的元素還包括動畫、音樂、程序等等。

在網頁上點擊滑鼠右鍵，選擇菜單中的「查看源文件」，就可以通過記事本看到網頁的實際內容。可以看到網頁實際上只是一個純文本文件。

它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述（例如字體、顏色、大小），而瀏覽器則對這些標記進行解釋並生成頁面，於是就得到你現在所看到的畫面。

為什麼在源文件看不到任何圖片？網頁文件中存放的只是圖片的鏈接位置，而圖片文件與網頁文件是互相獨立存放的，甚至可以不在同一台計算機上。

網頁通常有以下元素：

文字資料圖像檔案Applet（在頁面內執行的副程式）超鏈結網頁的合成體為網站，一個網站的開始點為首頁。

7、現在網頁設計中的為什麼少有人用 11px，13px，15px 等奇數的字體

偶數字型大小相對更容易和 web 設計的其他部分構成比例關系。比如：當我用了 14 px 的正文字型大小，我可能會在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的標題字型大小。

Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），於是略顯稀疏。

這個我不確定，需要確認：聽說有不少字體的 hinting 都只專門處理了常用的幾個偶數字型大小。
除了上面說的這些，奇偶字型大小的字體渲染效果似乎其實差別不大（尤其在 OS X 和 Linux 以及手持設備上）。即使在 Windows 里，微軟雅黑在 11 至 17 px 之間的奇偶字型大小效果似乎也都差不多。（呃，都差不多糟糕……）
目前 12、13、14、15、16 px 其實都是很不錯的正文字型大小。知乎和豆瓣的正文字型大小都是 13 px，而中文維基百科的正文字型大小是 15 px，並沒有什麼不好。

另，@賀師俊指出：
早期的 Windows 里，中易宋體點陣只有 12 和 14、15、16 px，唯獨缺少 13 px。

8、網頁設計中像素、PX與百分比的迷惑

我來給你掃盲

首先：
像素就是PX 一個像素就是 1px，是絕對寬度，不隨瀏覽器窗口大小變化而變化
百分比是指占整個瀏覽器的百分比，比如窗口最大化和調整窗口大小時會跟著變化

其次：
解析度是以像素作為基本單位的解析度為1024*768像素就是屏幕寬分為1024 列高分為768行的像素矩陣，
當你把解析度由1024*768像素改為800*600時你會發現你的桌面圖標會明顯變大

現在回答你的具體問題：
1.上面已經提到屏幕解析度的意思，如果CSS中是px（即像素），
比如為200PX
屏幕解析度為1024*768像素那麼其中橫向的1024個像素中有200個是被該DIV佔用的寬度，無論怎麼改變瀏覽器窗口的大小DIV的寬度都不變

2.電腦解析度與屏幕尺寸沒有直接關系，不過一般不同尺寸的屏幕適合不同的解析度
比如說你的屏幕可以選擇設置為1024*768像素或者800*600，不過會對顯示效果有影響，上面已經提到當你把解析度由1024*768像素改為800*600時你會發現你的桌面圖標會明顯變大....不曉得你體會出來了沒

3.div的width為50% 不是顯示屏寬度的50%，而是瀏覽器窗口當前寬度的50%，（當瀏覽器窗口不是最大化時窗口大小可以調整）當瀏覽器窗口大小改變時 DIV的寬度也隨之改變

4.網頁上寫最佳解析度為1024*768像素就是他網頁基本上定義為整個頁面的寬度大約適合為1024px的，如果解析度寬度小於1024則很可能網頁有橫向的滾動條，那樣不怎麼美觀，如果大於1024像素的話網頁兩側則會出現空白，同樣影響美觀

問題補充：如果你看懂我上面所說的，那麼你應該知道答案了呵呵~~

9、網頁設計布局中為什麼實用margin：0px auto; 在IE下會不居中？都有哪些原因會造成這個問題???

如果谷歌火狐可以居中那麼你的IE 版本是IE5 才沒辦法居中現在誰還用IE5 - -
如果不是請上代碼幫你看看

10、為什麼網頁中的圖標常用16px，24px，32px 這些尺寸

提到圖標設計，似乎每個設計師都有話說，但是要做好圖標設計真的那麼容易么?今天這篇文章針對網頁設計領域的圖標設計進行了相對全面的梳理，從設計技巧到設計資源一應俱全，但願能幫上你! 圖標是每一個現代UI中不可或缺的組成部分，它們不僅能協助UI布局組織內容，而且輕量級的圖標融入界面也不會喧賓奪主。不僅手機和平板的APP UI中會大量用到各種圖標，而且iPod和智能手錶的界面中也是如此，這正是因為圖標具備快速直觀傳達信息的能力。在網頁設計剛剛興起的時代，小圖標就已經被早期的網頁設計師和開發者投入使用了。這些圖案和標識通常是常見的、易於接受的、功能型的圖形(文件夾、列印機、滑鼠、箭頭等)，在隨後的20多年間，這些圖標逐漸發展成約定俗成的一套圖形語言。在接下來的設計指南中，我想分享一些網頁設計中圖標使用的技巧，以及一些實用的免費圖標素材合集，希望你能喜歡! 圖標設計樣式我們通常所說的“圖標設計”其實覆蓋了相當大的一個范圍。小到網頁中那些純色扁平小標識，大到PS和AI精雕細琢的擬物風APP圖標，都在圖標設計的范疇內。每個圖標設計項目都有著不同的設計需求和圖標風格，這些不同造就了圖標設計的差異化。目前所流行的極簡風和扁平化設計，已經在全世界設計師中擁有了無數的擁簇。而之前一直不溫不火的線性圖標也已經成為了目前iOS系統的首選圖標，其他的移動操作系統也正在逐步跟進。從風格上來說，圖標並無對錯之分，只能說是各自選擇和偏向不一樣罷了。在我看來，扁平化設計和擬物化設計之間的競爭對比，對於網頁設計而言是一件無比美妙的事情。這也對圖標設計產生了影響，許多藝術領域的概念被引入到圖標設計中來，比如光影變化，深度，等等。作為設計師的你如果更傾向於扁平化設計，那麼你需要學習創建紋理，控制陰影，讓你的設計看起來富有真實感。為此你需要進行大量的練習，但是這絕對是值得的。企業品牌設計雖然品牌設計看起來是顯而易見的事情，但是它依然值得一提，因為那些優秀的網站通常有著優秀得令人難以置信的品牌設計。一個優秀的圖標能向用戶傳達出品牌的理念和情感。當你為一個企業或者網站進行品牌設計的時候，品牌的圖標、吉祥物或者符號應該讓品牌和它的用戶之間形成獨特的情感聯系。當然，你也可以為品牌設計一系列不同的圖標，每個圖標包含不同的效果，傳達不同的理念。圖標設計的可能性是如此之多，你甚至可以設計出以個圖標大合集，讓所有不同的圖標擁有相同的風格。由於每個圖標都是獨特的存在，但是風格又如此一致，當它們運用到網頁中的時候，可以讓整個網頁擁有獨特的氣質，足以從諸多設計中脫穎而出。 MailBakery 就是這樣一個典型的案例，它使用了個大圖來宣傳它們的服務。當游標移動到下方每一個圖標上的時候，上方的大圖內容會被替換成相應的圖片內容，這樣的圖標+圖片的組合在設計上保持著高度的一致性。這些圖標所對應的圖片可以說是專門為網站定製的，但是這些圖標卻是某個免費圖標集的一部分。你可以在幾十個不同的網站上看到這些相同的圖標，也就是說，這些圖標作為潛在品牌設計的獨特性，已經被忽略掉了，他們其實可以做的更好。也正是因此，我常常建議有報復的圖標設計師去學習為界面單獨定製成套的圖標集。對培養品牌、客戶以及項目而言，這都是更為長遠更有價值的事情。導航鏈接在過去，網頁上的圖標常常用作內容導航，也就是說，圖標的內容和含義，同圖標所指向的頁面內容/性質高度相關或者一致。今天，Facebook上的導航也遵循著同樣的原則。雖然你不會一直遵循這樣的設計方式，但是有必要且值得了解它。下拉菜單鏈接通常非常實用，因為用戶會主動去了解每一個菜單的名稱。但是如果在橫向或者縱向上有十幾個導航鏈接的話，通過圖標來識別是比較可靠的方案。視覺內容識別在網頁設計中使用業內圖標最主要的原因是用來區分內容。圖標可以從視覺上更清晰地傳達信息，能夠平衡包含大量文本的布局，所以，如何通過一個簡單的圖標來准確傳達信息是設計師的必修課。我最喜歡的案例就是GitHub的教學頁面。頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍，當你向下滾動的時候，每個板塊都有單獨對應的圖標，為你說明這以塊是幹啥的。值得注意的是，每個圖標都使用的是手繪的效果，雖然色彩不同，但是整體風格高度一致，明顯是統一設計的一整套圖標。更重要的是，每一個圖標都明確直觀地描述了它所在區塊的內容。文字內容足以描述清楚細節，但是圖標能高度概括地闡明信息。你可以在 Glazed & Infused 的首頁看到類似的設計效果。文字小區塊詳細地描述了他們的服務、咖啡和禮品卡的信息，而頂部的手繪圖標則從視覺上闡明了內容的性質，更重要的是，這三個圖標迅速地抓住了用戶的眼球。矢量背景從重復平鋪背景到矢量對象，你可以用矢量圖形做很多事情。對網站背景的處理方式，已經遠不止於平鋪紋理那麼單一了。通過矢量圖形來創建覆蓋整個背景的場景已經很容易了。矢量圖形可以很輕松地縮放，但是很難創造出逼真的效果。想製作出復雜樣式的矢量圖形並不容易，你需要通過大量的練習來熟悉在圖形上構建圖形的技巧，不過一旦學會還是蠻有趣的。在這里我們推薦一個好用的工具：Bota Iusti。設計教程跟蹤學習在線的設計教程是提高圖標設計技能的重要方式。想要精通設計技能沒有捷徑，唯有不斷學習，堅持練習。雖然圖標設計是一個廣泛的領域，但是許多教程是可以舉一反三的，接下來提供的一系列教程非常實用，希望你能通過學習融入日常的設計中去。 16×16 px Icons Weather Line Icons Flat Social Icon Tab Bar Icons Bat Icon Gem Icons Water Pistol Mail Alert Notebook Almost Flat 免費圖標 40 Flat Icons Mini Icons Colorful Iconset Simple Flat Sport & Fitness Chat & Email Atitel Icons Tab Bar Icons Simple Lines Flatified Web Design Iconset iOS Settings Icon Colorful Switch Synthesizer Book App Icon

導航:首頁 > 萬維百科 > 網站設計中對px的理解

網站設計中對px的理解

與網站設計中對px的理解相關的知識