网页字号设置多大才更适合五花八门的阅读器
在这个显示器百花齐放的时期，网页设计师往往需要考虑不一样客户端的阅读体验。文字大小，是会员体验中的一个重要局部。不一样的分辨率，不一样的显示器尺寸，不一样的DPI，以致不一样的阅读器设置，都会对终究展示的文字大小带来影响。虽然此刻许多阅读器已经可以利便地缩放页面，但会员每次光临都要从新缩放，总归费事，何况还有很多会员不晓得怎样缩放页面。最佳还是依据会员的分辨率给会员一个比拼关心的默许字号，那这个字号多大合适呢？
12px?14px?15px?16px? 还是压根就不应当运用px这个单位呢？
题目的根源，在于屏幕上的一切字号单位（px,pt,em）都是相对单位，单凭它们并不能肯定文字的现实大小。何况人对文字大小的基本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。
物理尺寸
首先假定一个我们但愿达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，盘算可得它的高度约是4.32mm，我们规划让网页文字在大局部显示器上都比拼接近这个大小，那么在不一样分辨率下应当显示成多大的字号呢？
到人眼的距离
虽然笔记本的字号远小于台式机，可是现实并没有给我们带来那么大的不便，这是由于：个别运用笔记本时人眼到屏幕的距离比运用台式机时要近一些。当上网本越来越小时（极度的例子就是手机），人们运用的时候可能会拿的更近，这样视角更大。反之，当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。
定量来说：因为文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似以为视角θ正比于h,并与d成反比（θ≈tgθ=h/d）。也就是说，一样大小的文字，距离二尺时看到的只要距离一尺时的一半大小。
也就是说，显示器只能传达一个大约的尺寸，每个会员在具体操纵时仍会通过不盲目地调理到屏幕的距离来调整所看到的现实结果。面临越来越多的笔记本会员（请参照上一篇：笔记本电脑的市场份额），前端设计师们只能给出一个针对笔记本和台式机均匀尺寸的页面结果，具体就靠会员去自我调整了。
用JS实现不一样分辨率下主动调整字号
例如网页正文所在div的id为content——
注：为保证各阅读器下文字均可缩放，字号单位运用em而不是px，个别来说，阅读器默许1em=16px，0.875em1em1.125em即为141618px。
运用字号缩放时请注意：对该div内的标题等字号单位最佳运用百分比，而不是牢固字号，以便随正文同步缩放。
第一步：统计会员主要的分辨率和对应的屏幕大小。
要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。会员分辨率的散布状况可以从网站的统计日志里获得。因为每个分辨率设置可能对应好几个不一样尺寸的屏幕，而屏幕尺寸又没法通过网页获得，只好对此刻的显示器市场进行统计剖析：针对某一分辨率，统计可能的屏幕尺寸范畴，从最小到最大，相对主流的是多大（或运用该范畴的中间值作为主流尺寸）。
电脑显示器市场（产种类类繁多，未免挂一漏万，数据仅供参考）
第二步：盘算每个分辨率主流屏幕尺寸的物理宽度
此刻的显示器长宽比不仅有4：3的规范屏，16：10的宽屏，还有更多不法则比例，为了在不一样长宽比的显示器之间进行比拼，同一运用横向分辨率来统计。用主流尺寸和长宽比（假如像素的长和宽雷同）盘算出屏幕宽度（英寸），再换算成公制（毫米），将其一一对应就可看出屏幕大小的趋势。再联合各分辨率的会员散布，效果如下图所示（图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示运用该分辨率的会员人数。其中蓝色气泡表示规范屏，紫色表示宽屏）：最大的三个气泡离别是1024*768,1280*1024,1280*800。
第三步：盘算不一样显示器上的字号大小
用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数，就可以得到在不一样分辨率下所需的字号。例如要显示4.32mm见方的文字，各分辨率下离别需要如下的字号（对笔记本和台式机离别统计）：
不一样分辨率下需要的字号
可以看出笔记本和台式机的尺寸相差很大，为利便运用，运用各分辨率的主流尺寸或均匀尺寸盘算出指定字号在每个分辨率下所需的字号。（下图去除了根本只用在笔记本上的那些分辨率），以4.32mm、3.77mm、3.25mm为例（17寸1280*1024分辨率下的16、14和12号字）：
为维持牢固物理尺寸，各主流显示器下所需字号与分辨率的关系因为在未开启cleartype的状况下，一些中文字体在非偶数字号下的显示结果欠佳，所以个别倡议运用12、14、16、18、22px等偶数字号。也就是对某个分辨率选中离它最近的偶数字号。例如：屏幕横向分辨率在1100下列的采纳14px，1100到1500采纳16px，1500以上采纳18px，依此类推。
