手机端最小字号

篇一：字号尺寸大小对照表

我国的活字采用以号数制为主、点数制为辅的混合制来计量。

点数制：又叫做磅数制（英文point的英译，缩写为P或PT），既不是公制，也不是英制，是印刷中专用的尺度，是欧美各国用来计算拉丁字母（西文字母）活字大小的标准的制度。因各字母的字身宽度不，其点数只能按长度来计算。我国大都使用英美点数制。

1点即1磅=0.35146毫米，1英寸=72磅=25.3毫米。。。。。。28磅大约为1cm,也就是28号字为1厘米大小。

号数制：我国用来计算汉字铅活字大小的标准的制度。以互不成倍数的几种活字为标准，加倍或减半自称体系。字号的大小可以分为四个序列： 四号序列（一号、四号、小六号）；

五号序列（初号、二号、五号、七号）； 小五号序列（小初号、小二号、小五号、八号）；

六号序列（三号、六号）。

其中：四号为一号的一半,小六号为四号的一半；二号为初号的一半,五号为二号的一半,七号为五号的一半；小二号为小初的一半,小五号为小二号的一半,八号为小五号的一半；六号为三号的一半。通常书籍上正文多用五号字，也称老五号字。

in英寸：inch

mm毫米：millimeter

pt点：point

px像素：pixel

pc皮卡：pica(1皮卡=12点）

1英寸=72磅，那么1磅=1/72英寸，9磅=9*1/72=1/8 inch

DPI是一个比较常见的东西，在操作系统和浏览器中，在扫描仪、打印机、数码相机中都会见到。

DPI(dots per inch)原来专门指印刷中的计量单位，表示每英寸能印刷的网点数或线数，用来衡量打印机的打印精度，指输出分辨率。

PPI（pixels per inch)指图像分辨率，在图像中，每英寸能显示的像素数目。具体说是电脑操作系统和浏览器中常用的单位，但后来与DPI混用了。

所以，具体说，打印工具中的DPI与电子产品的屏幕分辨率DPI，是不同的。

无论在哪个操作系统和firefox浏览器中，默认的DPI都是96，96*1/8=12px

关于像素和磅，我们来换算一下，在小字体的时候，分辨率是96DPI,也就是说每英寸能显示96个像素，标准说是96磅，9磅就是96*1/8=12像素，我们常见的就是这种12X12点阵的字体了。在大字体的时候，分辨率是120DPI，

篇二：手机网站设计尺寸及界面布局

设计页面要求及规范

主要是几个页面

1.欢迎页

2.首页

3.菜单框

4.注册与登录

5.弹出窗口

6.动态展示交互

7.详细页

8.搜索页

设计尺寸规范

状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

Logo出矢量图512*512 icon:29*29 72*72 512*512

iphone

1.尺寸以及分辨率

320*480，640*960，640*1136网页和移动的UI用72px

2.界面基本组成元素

iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的，所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧：

状态栏：高度 40px

导航栏：高度 88px

主菜单栏：高度 98px；

内容区域：高度为：734px

如果640*1136是910px

iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

3.字体

32~36px32px，注释等提示文本28px。

不同则img-line.png，img-line@2x.png

Android

1.尺寸以及分辨率

提到Android的尺寸，480*800、720*1280。点9切图所有手机的适配。

Android界面尺寸：480*800、720*1280、1080*1920。

2.界面基本组成元素

与ios的一样，还是有状态栏、导航栏和主菜单栏，以720*1280的尺寸,状态栏的高度应为50px，导航栏的高度96px，主菜单栏的高度96px。内容区域高度为：

1038px(1280-50-96-96=1038)窗体底端

Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)

字体：android原生的字体，与微软雅黑很像。字体大小范围为16px~32px IOS：宽度640PX 高度1136px

iOS屏幕尺寸有这几种：320*480，960*480，1024*768

Ipad端

iPad界面尺寸：1024*768、2048*1536

单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。

单位

iOS的尺寸单位为pt，Android的尺寸单位为dp。

单位之间的换算关系随倍率变化：

1倍：1pt=1dp=1px(mdpi、iPhone 3gs)

1.5倍：1pt=1dp=1.5px(hdpi)

2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

3倍：1pt=1dp=3px(xxhdpi、iPhone 6)

4倍：1pt=1dp=4px(xxxhdpi)

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

设计页面所用版式

1、列表式（搜索产品和新闻模块）

1.抽屉式（产品模块）

2.

篇三：网页标准字体字号

标准字体字号

中文网页一般文字正文都采用宋体12号（12px）字体，因为这个字体是系统对于浏览器特别优化过的字体。虽然12px-20px的宋体字都还能看，但是宋体12px是最漂亮的，也是最普遍应用的。

黑体一般是14号，因为一般很少用黑体做正文，主要都是标题或者是关键字。黑体14px是优化过的字体。

英文网页一般用11px字号，个人最喜欢的字体是tahoma与verdana这两种！特别是verdana，是最经典，最好用的字体！ 网页标准宽度：

1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003；800宽-21=779。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。2、在Firefox下，宽度的分率辨减19。比如 1024的宽度-19就变成10053、在Opear下，宽度的分率辨减

23。比如1024的宽度-23就变成 1001（注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。）所以如果是1024的分辨率，你的网页不如设成1000安全一点。如果是800的分辨率一般都设成770。

这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化 所以800的分辨率一般设定760左右,1024的设定990左右。

在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。 文字大小，是用户体验中的一个重要部分。不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号，那这个字号多大合适呢？

12px？14px？15px？16px？ 还是压根就不应该使用px这个单位呢？

问题的根源，在于屏幕上的一切字号单位（px，

pt，em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。 物理尺寸

首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是4.32mm，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？ 第一步：统计用户主要的分辨率和对应的屏幕大小。 要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。电脑显示器市场（产品种类繁多，难免挂一漏万，数据仅供参考） 第二步：计算每个分辨率主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有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，依此类推。 到人眼的距离

虽然笔记本的字号远小于台式机，可是实际并没有给我们带来那么大的不便，这是因为：一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时（极端的例子就是手机），人们使用的时候可能会拿的更近，这样视角更大。反之，当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。

定量来说：由于文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似认为视角θ正比于h，并与d成反比（θ≈tgθ=h/d）。也就是说，同样大小的文字，距离二尺时看到的只有距离一尺时的一半大小。 也就是说，显示器只能传达一个大概的尺寸，每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户（请参照上一篇：笔记本电脑的市场份额），前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果，具体就靠用户去自我调整了。

用JS实现不同分辨率下自动调整字号 例如网页正文所在div的id为content——

注：为保证各浏览器下文字均可缩放，字号单位使用em而不是px，一般来说，浏览器默认1em=16px，0.875em\1em\1.125em即为14\16\18px。

使用字号缩放时请注意：对该div内的标题等字号单位最好使用百分比，而不是固定字号，以便随正文同步缩放。