zoukankan      html  css  js  c++  java
  • 如何重写网站CSS

    如何重写你的网站CSS
    Jorux.com作为一个对视力下降人士负责任的站点,已经重写了CSS的Font-size部分。在这里,Jorux和各个有人文精神的网站主讨论如何用em重写Font-szie的问题。

    em vs. px

    em是何物?
    em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:
    1. em的值并不是固定的;
    2. em会继承父级元素的字体大小。

    重写步骤:
    1. body选择器中声明Font-size=62.5%;
    2. 将你的原来的px数值除以10,然后换上em作为单位;
    简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

    诡异的12px汉字(原因待查)
    本人在完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗?
    本现象只发生在12px的汉字,英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm, 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css,看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接

    还可以做哪些改进

    为什么还需改进:
    1. 你的网站css过于复杂,以至于不知道元素的从属关系,很难重写css;
    2. 绝大部分人看了本文之后仍然不会重写css;
    3. 很大部分人不知道浏览器可以调整页面的字体大小。

    所以你需要一个诸如本站信息框中的字体大小调整控件。
    相信本站读者的英语能力,这里就不再罗嗦了,请参看:The Text Changer

    Important reference:
    1. How to size text using ems
    2. The Text Changer

    备注:
    1. 自网站Reboot以来,老爸又反映我整天在”属性一”"属性二”的,看不大明白,已经拒绝访问Jorux.com了;
    2. 读者对如何用em重写css,或是对字体大小调整控件有任何疑问,请留言;
    3. 本站在加强易用性上做了如下改进:a. 用em重写了css; b. 去除了51.la和文本广告代码,提高了网页加载速度; c. 增加了字体大小调整控件;
    4. 重新整理”Other Blogger”链接,请发现被摘掉链接的网站自行摘除链向本站的链接,本站停止交换友情链接。尚保留的网站有如下特点:a. 非日记式博客;b. 内容优秀;c. 原创为主;
    5. 本站常规在周一发表post,间隔为一到两周,感谢读者对本站的关注, 以后除星期一以外,您都不需更新本站Feed了。

    (摘录:原文:http://jorux.com/archives/95-websites-of-china-need-to-rewrite-css/

    Lionden Lee

    Email:hsdlionden@gmail.com

    (转载注明:博客园 Lionden

  • 相关阅读:
    在SQLite中使用索引优化查询速度
    SQLite支持的SQL数据操作
    left (outer) join , right (outer) join, full (outer) join, (inner) join, cross join 区别
    深入理解Android内存管理原理(六)
    Merge Sorted Array
    Sort Colors
    Construct Binary Tree from Preorder and Inorder Traversal
    Binary Tree Postorder Traversal
    Symmetric Tree
    Rotate Image
  • 原文地址:https://www.cnblogs.com/lionden/p/2948489.html
Copyright © 2011-2022 走看看