＜ 知识拓展：CSS 中常用的计量单位有哪些？ ＞ |
您所在的位置：网站首页 › 甲烷的计量单位有哪些呢 › ＜ 知识拓展：CSS 中常用的计量单位有哪些？ ＞ |
|
👉 前言
在CSS中，经常会使用到各种计量单位来设定各种模块的长宽、大小比例 、边距大小 及 定位等。 常用的计量单位有：px、%、em 这几个，它们已经适用于大部分项目情景的开发中，且拥有比较好的兼容性。 但是从 CSS3 开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm（vmin、vmax）等一些新的计量单位。利用这些新的计量单位能更好的开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等。 接下来，小温将给大伙简单阐述下常用的计量单位及用法！ 👉 介绍在 CSS 单位中，可以分为相对长度单位、绝对长度单位，如下表所指示： CSS计量单位举例相对长度单位em、ex、ch、rem、vw、vh、vmin、vmax、%绝对长度单位cm、mm、in、px、pt、pc> 简述： %：百分比in：寸cm：厘米mm：毫米pt：point，约等于 1/72寸；pc：pica，约等于6pt，1/6寸；px：屏幕上的一个像素点；em：元素的 font-size；ex：font-size 的 x-height 值，为小写字母 x 的高度，通常相当于font-size的一半。ch：字符0(零)的宽度；rem：根元素(html元素)的font-size；vw：viewpoint width，可视窗口宽度，1vw等于视窗宽度的1%；vh：viewpoint height，可视窗口宽度，1vh等于视窗高度的1%；vmin：vw和vh中较小的那个。vmax：vw和vh中较大的那个。📃 知识拓展 vw / vh 中 ，可视窗口，在PC端，指的是浏览器的可视区域；在移动端，指的是布局视口。em是作为一个相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明 font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px任意浏览器的默认字体高都是 16pxrem，相对单位，相对的只是 HTML 根元素font-size的值。简化 font-size 的转化，和 em 转化一样，在根元素 html 中加入 font-size: 62.5%。vw、vh 比较容易和 %混淆，不过百分比宽泛的讲是相对于父元素： ① 对于普通定位元素就是我们理解的父元素 ② 对于position: absolute;的元素是相对于已定位的父元素 ③ 对于position: fixed;的元素是相对于 ViewPort（可视窗口） 往期内容 💨🔥 ＜ 初识 TypeScript – 简介及安装流程 ＞ 🔥 ＜ 在Vue中，为什么 v-if 和 v-for 不建议一起使用 ？ ＞ 🔥 ＜Javascript技巧： Javascript 是个难泡的妞，学点技巧征服 “ 她 ” ＞ 🔥 ＜ 知识拓展：前端代码规范 ＞ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |