放弃px选择em

  • 作者：scsidisk
  • 最后编辑：2011年10月24日
  • 标签： CSS

  1. 大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。

  2. 所以这不是一项很好的用户体验。

  3. 那么我们就要使用em单位作为字体显示单位。

  4. 浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。

  5. 换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。

  6. 不过还有一种更方便的方法，继续往下看！

  7. 这种方法要用到%单位（仅1次），其实%和em简单的话可以理解成前者只是比后者多2个0。

  8. 为了简化font-size的换算，大家可以在css中的body中先全局声明font-size=62.5%，这里的%的算法和em一样，100%=16px，1px=6.25%，10px=62.5%，也就是定义了默认字体大小为10px。

  9. 很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！

  10. 由于em具有会继承父级出血元素的字体大小的特点，这是的1em=10px，所以12px=1.2em。

  11. px与em的转换通过10就可以得来，很方便了吧！

  12. 此外有一点必须要注意，可能是IE处理汉字时，对于浮点的取值精确度有限，在body下62.5%出来的12px字体比直接定义的要大一点点，只要将62.5%换成63%就可以了。

  13. 通过以上对CSS代码的调整，你会发现自己的网站又向用户体验设计更靠近了一步，在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

文章分类
标签云
Gray, Public, 灰度发布, 灰度放量, ABTest, AB测试, 分流发布 CentOS, Linux, Shell Mac, Shell, Vim Linux SSH Mac Mail MacOSX 命令 MySQL, 调优 Apache, HTTP, ngnix MySQL gif, jpeg, png Markdown CentOS PHP, WordPress, Blog AsciiDoc, mod_deflat sudo Leopard, Snow Leopard Apache Nginx, 木马 hostname, upload md5, md5sum, DNS 版本 Cookie, PHP Chrome DooPHP, CSS Filter IT Java, Maven, Thrift Git Memcache MongoDB Node Node.js npm HTML Nginx JDK, Sublime Timestamp Lua, Redis, MacOSX, Class, Function Sublime, Snippets ObjC Cobar, Bash Brew, Homebrew AsciiDoc Error Yii MacOSX,Hadoop,MapReduce memcache, Markdown, Jekyll VIM Go, Golang, Redis MacTeX, CJK, Tex Tex, LaTex R, Brew Android, Java EC Mou GoAgentX, GoAgent Python HBase Markdown,Slide Jenv kerberos Junit Maven 虚拟化 LXC Docker bridge AngularJS PHPUnit Android composer Golang ReactNative, 项目管理 MAMP, Memcache, SecureCRT, Zoc, Mail, GPG Docker, Supervisor Test Retail Pay