在线试玩小游戏免费

書名： Axure RP案例教程
作者名：焦計(jì)劃編著
本章字?jǐn)?shù)： 952字
更新時(shí)間： 2019-05-21 10:37:26

3.拓展閱讀：焦點(diǎn)圖

3.1 焦點(diǎn)圖

焦點(diǎn)圖，從應(yīng)用的角度來(lái)說(shuō)就是將企業(yè)的主打產(chǎn)品、服務(wù)和企業(yè)核心經(jīng)營(yíng)理念等以大版面的圖片方式呈現(xiàn)在網(wǎng)站上。呈現(xiàn)的圖片通常是最新、最熱門的產(chǎn)品或者服務(wù)，讓用戶一進(jìn)入網(wǎng)站，視線就緊緊地被抓住。在使用焦點(diǎn)圖時(shí)需要注意的事項(xiàng)有：

（1）圖片要經(jīng)過(guò)精心的設(shè)計(jì)和挑選。焦點(diǎn)圖圖片內(nèi)容不能太復(fù)雜，要能聚焦到用戶想要傳達(dá)的信息。圖片要精心設(shè)計(jì)與制作，不能使用網(wǎng)站一些通用的素材圖片。

（2）在使用響應(yīng)模式設(shè)計(jì)的網(wǎng)站上，需要單獨(dú)為移動(dòng)終端配置圖片，確保在手機(jī)、iPad等移動(dòng)端上也有良好的顯示效果。

（3）網(wǎng)站焦點(diǎn)圖需要經(jīng)常測(cè)試與跟蹤，統(tǒng)計(jì)網(wǎng)站瀏覽用戶的轉(zhuǎn)化率，不斷地更新圖片。

3.2 網(wǎng)頁(yè)字體大小單位的選擇

圖3-18 字體大小

3.2.1 px

px像素，是絕對(duì)長(zhǎng)度單位的一種，它的大小是根據(jù)用戶屏幕顯示器的分辨率決定的（因此不同的設(shè)備顯示相同的像素值也可能會(huì)有不同的結(jié)果）。如果網(wǎng)頁(yè)設(shè)計(jì)人員使用px作為字體單位，那么其字體大小將不能被更改。

3.2.2 em

em的使用是相對(duì)于其父級(jí)的字體大小的，即倍數(shù)。瀏覽器的默認(rèn)字體高都是16px，未經(jīng)調(diào)整的瀏覽器顯示1em=16px。但是有一個(gè)問(wèn)題，如果設(shè)置1.2em 則變成19.2px，問(wèn)題是px表示大小時(shí)數(shù)值會(huì)忽略掉小數(shù)位的。而且1em=16px 并不容易轉(zhuǎn)換，因此，我們常常人為地使1em=10px。這里要借助字體的%來(lái)作為橋梁。

因?yàn)槟J(rèn)字體16px=100%，則有10px=62.5%，所以首先在body中全局聲明font-size=62.5%=10px，也就是定義了網(wǎng)頁(yè)body 默認(rèn)字體大小為10px。由于em有繼承父級(jí)元素字體大小的特性，如果某元素的父級(jí)沒(méi)有設(shè)定字體大小，那么它就繼續(xù)了body 默認(rèn)字體大小1em=10px。

但是由于em是相對(duì)于其父級(jí)字體的倍數(shù)的，當(dāng)出現(xiàn)有多重嵌套內(nèi)容時(shí)，使用em分別給它們?cè)O(shè)置字體大小往往要重新計(jì)算。比如說(shuō)你在父級(jí)中聲明了字體大小為1.2em，那么在聲明子元素的字體大小時(shí)設(shè)置1em 才能和父級(jí)元素內(nèi)容字體大小一致，而不是1.2em（避免1.2×1.2=1.44em），因?yàn)榇薳m非彼em。

3.2.3 rem

有了rem，再也不用擔(dān)心還要根據(jù)父級(jí)元素的font-size 計(jì)算em值了，因?yàn)樗冀K是基于根元素（<html>）的。比如默認(rèn)的html font-size=16px，那么想設(shè)置12px 的文字就是：12÷16=0.75（rem）。

需要注意的是，為了兼容不支持rem的瀏覽器，我們需要在各個(gè)使用了rem的地方的前面寫上對(duì)應(yīng)的px值，這樣不支持rem的瀏覽器就可以優(yōu)雅降級(jí)兼容性詳情了。

選擇使用什么字體單位主要由具體項(xiàng)目來(lái)決定，如果你的用戶群都使用最新版的瀏覽器，推薦使用rem；如果要考慮兼容性，那就使用px，或者兩者同時(shí)使用。

官术网_书友最值得收藏!

Axure RP案例教程

3.拓展閱讀：焦點(diǎn)圖