浏览器默认的字体大小为100%=16px=12pt=1em

px像素(Pixel):是固定大小的单元。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。一个像素等于电脑屏幕上的一个点(是你屏幕分辨率的最小分割)。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

点(pt):通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点跟像素,他们是固定大小的单位,不能伸缩。

em(Ems):是相对长度单位,是一个可伸缩的单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

百分比(%):百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

em跟%的区别:
当用户设置网页字体“Smallest”或者“Largest”的时候,em比%显示地更大。即当真正去扩展时,在实际应用程序中,em文本尺寸变化太大,在一些客户端机器上最小的文本变得不是很清晰。
 
使用px的弊端:
ie浏览器“查看→文字大小”时设置不起作用,影响用户体验。即IE无法调整那些使用px作单位的字体大小。
firefox可以调整px和em?表示怀疑 经测试也不支持px。在“工具→选项”里面调整字体大小
chorome经测试也不支持px。在“设置→显示高级设置”里面设置字体大小
 
浏览器字体重置:
因为浏览器默认字体大小100%是16px=1em。所以要设置10px=1em的时候只要重置字体百分比为10/16=62.5%。这样,10px=1em; 12px只要写成1.2em即可
但IE浏览器在处理汉字时,对于浮点的取值精确度有限,在body下62.5%比直接定义的字体要大一点点,因此ie中 *font-size:63%即可。
注意:em和%会继承父级元素的字体的大小。
所以若最外层div为
/*font-size*/
.fz { font-size: 1.2em; }

本应该,14px=1.4em,但因为浏览器字体的继承性

<div class="fz">
字体大小12px
<div style="font-size: 1.4em">
字体大小font-size: 1.4em
</div>
</div>
<div style="font-size: 1.4em">
字体大小font-size: 1.4em
</div>

so,

/*font-size*/
.fz { font-size: 1.2em; } .fz button, .fz input, .fz select, .fz textarea, .fz option { font-size: 1em; } .fz14, input.fz14 { font-size: 1.17em; } .fz16 { font-size: 1.33em; } .fz18 { font-size: 1.5em; } .fz20 { font-size: 1.67em; } .fz24 { font-size: 2em; }

em、pt、px和百分比的更多相关文章

  1. 常用长度单位PX/EM/PT/百分比转换公式与对照表

    PX.PT.EM.ex和in等都是我们常用的长度单位,尤其在网页的字体大小中经常用到.但是你知道PX.PT和EM之间是如何进行准换的吗?这里icech为大家找到了一个px.pt.em和percent大 ...

  2. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  3. 移动端页面使用单位的问题:关于px、百分比、em、rem开发中逐渐转换的问题记录

    开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~ 不知道大家平时写的 ...

  4. em,pt和px之间的换算

    任意浏览器的默认字体高度16px(16像素).所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的b ...

  5. html px em pt长度单位(像素 相对长度 点)知识(转)

    html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的 ...

  6. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  7. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  8. css单位em、px、rem和pt的区别

    1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...

  9. CSS尺寸和字体单位-em、px还是%

    在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...

  10. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

随机推荐

  1. php开发中sql语句拼接示例

    1.插入语句 $sql="insert into Ad(AdClassID,AdType,AdTit,AdFileName,AdUrl,AShow,Addtime) values('&quo ...

  2. Jenkins安装war版本

    Jenkins的war包安装很简单: 下载jenkins的war包地址:https://jenkins.io/download/ 选择对应的版本 然后放入tomcat启动就好,其他根据提示来就好,比较 ...

  3. 使用Django快速搭建简单的数据管理后台

    使用Django快速搭建简单的数据管理后台 概述 需求描述: 数据表已建好,能可视化操作增删改查,避免直接操作数据库 简版的管理系统 环境 Windows 10 x64 Python 3.6.3 (A ...

  4. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

  5. JAVA Eclipse 创建android xml看不到预览怎么办

    电机安卓图标,设置为更低的API版本即可

  6. pkav之当php懈垢windows通用上传缺陷

    $pkav->publish{当php懈垢windows}剑心@xsser抛弃了我,但我却不能抛弃乌云..php懈垢windows,就像男人邂逅女人,早晚都会出问题的..感谢二哥@gainove ...

  7. 96Boards扩展板 STM32 B96B-F446VE 牛刀小试

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...

  8. project修改时间日历

    视图→甘特图 格式→时间表→右键时间表  详细的日程表,然后双击时间即可

  9. POJ 2001 Shortest Prefixes 【 trie树(别名字典树)】

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15574   Accepted: 671 ...

  10. UML--组件图,部署图

    组件图用于实现代码之间的物理结构,详细来说,就是实现代码交互.通过接口,将不同的软件,程序连接在一起. [理解] 1.组件的定义相当广泛,包含:源码,子系统,动态链接库,Activex控件. 2.组件 ...