今天收到一個(gè)同事的投訴：創(chuàng)建直播間為啥要固定尺寸??？不能用手機(jī)自帶的比例（16:9）嗎？然后發(fā)了張比例圖給我，并標(biāo)明他用的是華為mate7，直接選擇圖片比例是多么的方便。

我在擁擠的地鐵上耐心的回復(fù)：手機(jī)上的圖片都是自適應(yīng)的，不能固定比例（分辨率），不同的手機(jī)分辨率不同……

解釋了一大推，也不知道他聽懂沒，但想起剛?cè)胄械奈?，不也對這些一直模模糊糊的嗎？今天整理一下手機(jī)中圖片和文字顯示技術(shù)方面的實(shí)現(xiàn)思維。

一、圖片大小

首先要了解一個(gè)基本概念，不同手機(jī)的分辨率不同，即使我們定義了一個(gè)規(guī)定的尺寸，程序在實(shí)現(xiàn)時(shí)不是按照這個(gè)固定尺寸來的，而是根據(jù)手機(jī)屏幕的大小來自適應(yīng)的。

允許網(wǎng)頁寬度自動調(diào)整? 不使用絕對寬度，具體來說，就是手機(jī)寬度有多大，圖片就平鋪到多大。下面用幾個(gè)實(shí)例來說明：

1、寬度自適應(yīng)，高度不限：常用于富文本編輯器中的圖片，或者進(jìn)入的網(wǎng)頁是一整張圖片的網(wǎng)頁

??? 當(dāng)圖片高度>屏幕高度時(shí)，可以在頁面下拉；

??? 當(dāng)圖片高度<屏幕高度時(shí)，缺少的部分顯示為背景色。

2、寬度自適應(yīng)，高度固定：一般用于banner圖

? ? 當(dāng)圖片高度>固定高度時(shí)，裁剪圖片上下多余的部分；

??? 當(dāng)圖片高度<固定高度時(shí)，圖片上下缺少的部分顯示為背景色。

3、寬度百分比，高度固定：一般用于頁面列表中的小圖

??? 當(dāng)圖片寬度>屏幕百分比時(shí)，圖片寬度自動縮小到與屏幕中的寬度相同，圖片高度與寬弟等比縮放；

??? 當(dāng)圖片寬度<屏幕百分比時(shí)，圖片寬度自動放大到與屏幕中的寬度相同，圖片高度與寬弟等比放大；

?? 以上兩種情況，圖片的高度適配與第2條相同。

二、字體大小

相應(yīng)的字體也不能使用絕度大小（px），而只能使用相對大小（em）。

body{

font：normal 100% Helvetica，Arial,sans-serif;

}

這段代碼是指，字體大小是頁面默認(rèn)大小的100%，即16像素

h1{

font-size:1.5em;

}

然后,h1的大小是默認(rèn)大小的1.5倍，即24像素（26/16=1.5).

samll{

font-size:0.875em；

}

small元素的大小是默認(rèn)大小的0.875倍，即14像素（14/16=0.875）