整理网上的资料

font字体,用px,em,100%,rem?分什么情况考虑?

我们逐渐意识到,我们用px作为文字大小的单位,已经出现很多问题。最主要是体现在用户不能灵活的控制文字的大小。
 对于大多数用户来说或许这并无不妥,但对于年龄稍大及眼力不佳的访客来说,他们不能按他们的意愿,通过浏览器来改变文字的大小。我们以“用户至上”为原则,我们应该采取一种策略,不要求通过px为单位获得100%的精确性,我们需要获得更大的浏览器的可伸缩性与易用性,灵活的满足访客的需要。

一、长度单位

  长度单位分为两种,一种是相对长度,另一种是绝对长度。
  以下为三种相对长度单位:
  ◆em相对于父对象的大小
  ◆ex相对于特定字体中的字母x的高度
  ◆px相对于特定设备的分辨率,这是最最常用的单位,也是我们一直坚守的单位。从技术角度来说,px像素其实是一种相对大小的度量单位,它于特定设备的显示或打印的分辨率有关。例如,一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。

  以下为五种font-size属性值绝对长度单位:

  绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
  ◆in英寸
  ◆cm厘米
  ◆mm毫米
  ◆pt点
  ◆pc12点活字

二、相对大小的关键字

  font-size属性值相对大小的关键字只有两个值:
  ◆larger
  ◆smaller
  这两个值的设定与父对象的设定值有关。我们可以像理解老式的<small><big>那样来理解它们。它们是设定文字大小的最基本的方式,并会受到上层对象的文字大小定义的影响。

  三、绝对大小的关键字

  这类关键字共有7个,他们的实际大小根据不同的浏览器及设备来决定。

  ◆xx-small
  ◆x-small
  ◆small
  ◆medium
  ◆large
  ◆x-large
  ◆xx-large

  W3C建立建议浏览器开发公司,将每个关键字之间的比例设定为1.5。并推荐让这个比例保持恒定,妈medium是small的1.5倍。同样large是medium的1.5倍。

  四、百分比

  font-size属性值中使用百分比设置大小,将在容器对象文字大小的基础上进行改变。如果我们设置body的文字大小为10。我们设置p的文字大小为150%,则p的文字大小就为15。不管10是什么样的单位,百分比作为一种比例进行缩放调整。

我们常用的有px、%、em,px就不多说了,em和%多说点儿:

移动端html5手机网站字体单位font-size选择px还是rem
分为两种情况:
①对于只需要适配手机设备,使用px就可以了
 
②对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
 
rem参考代码:

  1. html {font-size:10px}
  2.  
  3. @media screen and (min-width:480px) and (max-width:639px) {
  4. html {
  5. font-size: 15px
  6. }
  7. }
  8.  
  9. @media screen and (min-width:640px) and (max-width:719px) {
  10. html {
  11. font-size: 20px
  12. }
  13. }
  14.  
  15. @media screen and (min-width:720px) and (max-width:749px) {
  16. html {
  17. font-size: 22.5px
  18. }
  19. }
  20.  
  21. @media screen and (min-width:750px) and (max-width:799px) {
  22. html {
  23. font-size: 23.5px
  24. }
  25. }
  26.  
  27. @media screen and (min-width:800px) and (max-width:959px) {
  28. html {
  29. font-size: 25px
  30. }
  31. }
  32.  
  33. @media screen and (min-width:960px) and (max-width:1079px) {
  34. html {
  35. font-size: 30px
  36. }
  37. }
  38.  
  39. @media screen and (min-width:1080px) {
  40. html {
  41. font-size: 32px
  42. }
  43. }

em就是基于当前元素的(如果没设置就是继承其父元素的)font-size

而%对于font-sizeline-height等,是基于其父元素的font-size的,而对于text-indentmarginpaddingwidth等属性,则是基于父元素的宽度的。

CSS3中的单位:

css3中引入了一些新的单位:

  • ch——字符0(零)的宽度;
  • rem——根元素(html元素)的font-size;
  • vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
  • vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
  • vmin——vw和vh中较小的那个。

显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。

rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活——或者说,比px灵活,比em更精确~~。。。XD。。。

如果没有定义font-size怎么办?

其实不用担心,传说,各个浏览器史无前例的默认 font-size:16px;,所以,即便你在样式文件中忘了定义 font-size 初始值,也可以放心的使用em、rem。

浏览器支持:

rem,各浏览器基本都支持了:

  • IE9+
  • FF3.6+
  • Chrome 6+
  • Safari 5+
  • Opera 11.6+

vw、vh、vmin:

  • Chrome 26+
  • Firefox 19+
  • Safari 6.1+
  • IE 9+ (部分支持)
  • iOS Safari 6.1+ (部分支持)
  • android 4.4+

同样是xxrem(某个值的rem)的宽度或长度,谷歌比ff、opera等其他浏览器要大很多,因为 Chrome 强制最小字体为 12px,即使设置成 10px 最终都会显示成 12px。

em是相对于父层字体大小的缩放,和你的屏幕大小无关。

font-size的探究的更多相关文章

  1. hiho #1288 微软2016.4校招笔试题 Font Size

    #1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...

  2. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  3. GetPropInfo Font Size

    设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...

  4. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  5. XE6 c++builder 设置 font size GetPropInfo SetOrdProp

    PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...

  6. UIAlertController custom font, size, color

    本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...

  7. Phone Font Size

    This table lists and describes the various font sizes that can be applied. Attribute = FontSize   Na ...

  8. PyCharm Change Font Size

    file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...

  9. 【hihoCoder】1288 : Font Size

    题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...

  10. LaTex Font Size 字体大小命令

    LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE ...

随机推荐

  1. Data Base MongoVue 破解治标不治本

    MongoVue  破解治标不治本 ---------解决燃眉之急 注册表中查找B1159E65-821C3-21C5-CE21-34A484D54444中的子项4FF78130 ,删除其下的三个子项 ...

  2. Linux 添加环境变量和删除环境变量

    环境变量是一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息.例如PATH.在交叉编译中,会经常运用到环境变量的设置. 在linux中,查看当前全部的环境变量的命令式env. 当然也 ...

  3. django 外键 ,django __

    data sqlite> select * from author; id name age 1 jim 12 2 tom 11 sqlite> select * from book; i ...

  4. [Golang] base64加密与解密

    首先解释以下什么是base64(来自百度百科): Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的详细规范.Base64 ...

  5. the specified child alread has a parent

    用 TestFragment   extends  Fragment     @Override     public  View onCreateView(LayoutInflater inflat ...

  6. Android用AutoCompleteTextView实现搜索历史记录提示

    简介 在我们平常上网的时候经常会用到谷歌或百度,在输入框中输入我们想要输入的信息就会出现其他与其相关的提示信息,非常方便.这种效果在 Android中是用AutoCompleteTextView实现的 ...

  7. 【笨嘴拙舌WINDOWS】键盘消息,鼠标消息

    键盘消息 Windows系统无论何时只有一个窗口(可能是子窗口,也就是控件)能获得焦点. 焦点窗口通过windows消息来响应人的键盘操作,与键盘相关的常用消息罗列如下: WM_KEYDOWN   按 ...

  8. Tyvj 1030 乳草的入侵

    以一个简单的BFS对基础搜索做一个收尾好了. 给一个草,然后以这棵草为九宫格的中心,每周向周围八个方向扩散,问多少个星期能把这个农场占满. 遍历整个map,最后一个出队列的对应的星期数就是所求. // ...

  9. POJ 1837 Balance 【DP】

    题意:给出一个天平,给出c个钩子,及c个钩子的位置pos[i],给出g个砝码,g个砝码的质量w[i],问当挂上所有的砝码的时候,使得天平平衡的方案数, 用dp[i][j]表示挂了前i个砝码时,平衡点为 ...

  10. Java 动态太极图 DynamicTaiChi (整理)

    package demo; import java.awt.Color; import java.awt.Graphics; import javax.swing.JFrame; import jav ...