Day_1.《无隙可乘的Web设计》_灵活的文字

Day_1.《无懈可击的Web设计》_灵活的文字

常见的方法

body{
    font-size:12px;
}

使用像素单位的优点：

• 不管使用哪种浏览器或者设备来查看，文字看起来都大小一致。

为什么这么做不是无懈可击的？

• 以像素为单位设定文字大小之后，Windows平台上的IE用户无法随意改变浏览器文字大小。
• 不适合响应式开发

我们有哪些选择？

• 长度单位

  • em:相对于父元素的字体大小
  • ex:相对于特定字体中字母x的高度
  • px:相对于特定设备的分辨率，是最常用的单位
  • rem:根据根元素的字体大小计算出的值
  • 除此之外还有一些绝对单位，在打印的时候比较有用，在此不列举了。

• 表示相对大小的关键字

  • larger
  • smaller

• 百分比值

• 表示绝对大小的关键字

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

他们之间都是以1.5倍为差

无懈可击的方案：

• 关键字+百分比，放弃像素级别的精确度

  • 用法：

      body{
          font-size:small;
      }
      h1{
          font-size:150%;
      }
    

  • 需要注意的地方：

    • 百分比是根据父元素设定，所以慎用嵌套百分比

• 通过em实现灵活的文字

  • 用法：

      body{font-size:62.5%;} /* 设置为10px大小*/
    

  • 注意：
    • em 也存在嵌套的问题
• rem单位
  • 使用rem不必考虑上下文和嵌套，只需根据根元素指定大小。