CSS的单位
2016-10-03 16:52
120 查看
vw vh vmin vmax叫做可视区百分比长度单位。
vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办? 这就是 vh 和 vw 单位为我们提供的。1vh
等于1/100的视口高度。栗子:浏览器高度900px, 1 vh = 900px/100 = 9 px。同理,如果视口宽度未750, 1vw = 750px/100 = 7.5 px。
vh和
vm依据于视口的高度和宽度,相对的,
vmin和
vmax则关于视口高度和宽度两者的最小或者最大值。比如,浏览器的宽度设置为1100px,高度设置为700px,
1vmin=
1px,
1vmax=
11px。如果宽度设置为800px,高度设置为1080px,
1vmin就等于8px,
1vmax则未10.8px。
rem是CSS3新引进来的一个度量单位,而rem是相对于根元素<html>,‘r’是“root”的缩写,意思就是1rem等于根元素的字体大小;大部分情况下,根元素就是元素了。
em | 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。 |
ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
pt | 磅 (1 pt 等于 1/72 英寸) |
pc | 12 点活字 (1 pc 等于 12 点) |
px | 像素 (计算机屏幕上的一个点) |
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作为单位就行了。
相关文章推荐
- CSS单位
- day14 HTML 表单标签 CSS 基本的用法 CSS 高级用法--定位 CSS 中的基本单位 CSS 3 新特性
- 学习CSS了解单位em和px的区别
- 你不知道的CSS单位
- CSS的单位及css3的calc()及line-height百分比
- CSS中的单位一览
- CSS了解单位em和px的区别
- CSS长度单位:px和pt的区别
- 常见样式问题六、CSS长度单位(px、em、rem等)及相关内容
- 学习CSS了解单位em和px的区别
- css中单位px、em以及rem的区别
- 浅谈CSS单位px、pt、em和rem
- CSS知识点总结(二)单位
- 学习CSS了解单位em和px的区别
- CSS:7个你可能不认识的单位
- 为你解惑:css中单位px,em,rem的区别。。。
- CSS系列:长度单位&字体大小的关系em rem px
- 用javascript控制css中style.height和style.width时应注意px单位问题
- CSS代码缩写以及单位和值
- css中单位em和rem的区别