zoukankan      html  css  js  c++  java
  • 网页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:

     Rec­om­mendedOc­ca­sional useNot rec­om­mended
    Screen em, px, % ex pt, cm, mm, in, pc
    Print 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

     http://files.cnblogs.com/wucg/demo-blueprint-css.zip

  • 相关阅读:
    [转]SQL Server 索引结构及其使用一
    平台无关的RICHTEXT实现
    谈谈时间管理陶哲轩
    BigNumCalculator
    关于构造和析构的几点拟人化思考
    ScaleForm十六戒言
    VAX对多种格式增加支持
    关于知识,经验,能力
    AutoTidyMyFiles
    王石语摘
  • 原文地址:https://www.cnblogs.com/wucg/p/3266989.html
Copyright © 2011-2022 走看看