网页CSS font-size使用em替代px
px和em都是长度单位,区别是,px的值是固定的,em的值是相对的,并且em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
为了简化计算,在css中的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
引自:http://www.w3.org/Style/Examples/007/units
But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:
Recommended | Occasional use | Not recommended | |
---|---|---|---|
Screen | em, px, % | ex | pt, cm, mm, in, pc |
em, cm, mm, in, pt, pc, % | px, ex |
The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc
从上面可以看出,不管屏幕输出或是打印,都推荐的em在其中,px反而在打印中不推荐。
使用em相对大小的另一个好处是,使js改动整个网页字体大小非常方便,只需要改变根结点body的font-size,整个网页的文字大小都变了。
<script type="text/javascript">
var defaultSize=62.5;
$(function(){
$("#btnChangeFontSize").click(function(){
defaultSize+=10;
$("body").css("font-size",defaultSize+"%");
});
});
</script>
调试时发现最新版的chrome中,当字体大小小于12px时,它默认就换成12px了,解决办法是添加css: body {-webkit-text-size-adjust: none; }
tests/index.html
最新文章
- 关于html5不支持frameset的解决方法
- 「LAMP」在ubuntu及其衍生版上 安装LAMP
- 对cnblogs.com用户体验的评价
- SQL Server 2008 的gis函数
- Oracle PL/SQL 异常处理
- winform模拟鼠标按键
- 【转载】C# Tutorial - Simple Threaded TCP Server
- Hash(4) hashtable,hashmap
- prototype/constructor/__proto__之prototype简单应用
- 用Swift完成不同View Controller之间的切换
- [cocos2d-x]屏幕自适应解决的方法
- String.IsNullOrEmpty()和String.IsNullOrWhiteSpace()的区别
- DevExpress.XtraEditors.TextEdit 设为密码输入框
- python3 完全理解赋值,浅copy,深copy 通过地址详细理解~
- 使用Github时遇到问题的解决方法
- MySQL数据库远程访问权限如何打开(两种方法)
- Django之模型层-了解ORM
- spring jpa nativequery in与修改
- Scala学习笔记(1)-基本类型归纳
- Python(多进程multiprocessing模块)
热门文章
- 【树链剖分】【线段树】bzoj3626 [LNOI2014]LCA
- 【点分治】bzoj2152 聪聪可可
- 8.5(java学习笔记)8.5 字节码操作(javassist)
- UC算法笔试题
- 手动编译含package的java源程序(包含外部包中定义的类)
- 解决ThinkPHP3.2.3框架,PDO驱动查询出来的字段名全是小写的bug
- 【InteillJ IDEA】Git的安装+同步项目到GitHub上
- 【java】JDK安装后,没有配置环境变量,也可以java -version查看到版本信息
- mongodb权限管理(转)
- Hadoop之Azkaban详解