font-size的探究
2015-07-05 11:21
225 查看
整理网上的资料
对于大多数用户来说或许这并无不妥,但对于年龄稍大及眼力不佳的访客来说,他们不能按他们的意愿,通过浏览器来改变文字的大小。我们以“用户至上”为原则,我们应该采取一种策略,不要求通过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就可以了
②对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
rem参考代码:
em就是基于当前元素的(如果没设置就是继承其父元素的)
而%对于
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。。。
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字体,用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参考代码:
html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } }
em就是基于当前元素的(如果没设置就是继承其父元素的)
font-size。
而%对于
font-size、
line-height等,是基于其父元素的
font-size的,而对于
text-indent、
margin、
padding、
width等属性,则是基于父元素的宽度的。
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是相对于父层字体大小的缩放,和你的屏幕大小无关。
相关文章推荐
- sublime快捷方式和node.js
- 马拦过河卒(NOIP)
- NSBundle 的常用方法
- <VirtualHost *:80>配置文件
- 范围要找个时间记住
- 【原创】FltGetFileNameInformation蓝屏分析
- NSHomeDirectory(); 动态获取路径
- 建立GridView Column
- SWIG and Android
- 计算几何(转)
- 架构师速成6.4-开发框架
- 算法导论学习---红黑树详解之插入(C语言实现)
- 架构师速成6.4-开发框架 分类: 架构师速成 2015-07-05 11:18 402人阅读 评论(0) 收藏
- API设计准则(转)
- 二维代数几何原理
- 提高HTML5 canvas性能的几种方法(转)
- 【USACO1.5.1】Number Triangles 数字金字塔
- 【原创】调用系统函数里面蓝屏例子
- MIT线性代数--推广意义的向量空间
- 第七节:将类型序列化为不同的类型以及将类型反序列化为不同的对象