px、em、rem、%、vw、vh、vm这些单位的区别

simpleapples 发布于2019-08-02 15:08 / 3347人阅读

摘要：就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是的，表示的是水平方向是个像素点，垂直方向是个像素点。视口被均分为单位再举个例子浏览器宽度相对于视口的宽度。等于视口高度的。

1.px

px就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

2.em

em参考物是父元素的font-size，默认字体大小是16px，所以1em不是固定值，因为它会继承父元素的字体大小

3.rem

rem参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可，相对于em使用，减少很大运算工作量，例：html大小为10px，12rem就是120px

4.%

% 是相对于父元素的大小设定的比率，position:absolute;的元素是相对于已经定位的父元素，position：fixed；的元素是相对可视窗口

5.vm

vm相对于视口的宽度。视口被均分为100单位

h1 {
    font-size: 8vw;
}

再举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vm相对于视口的宽度。视口被均分为100单位

h1 {
    font-size: 8vh;
}

再举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px

总结：

 
 
  1.vw：1vw等于视口宽度的1%。
  2.vh：1vh等于视口高度的1%。

但是使用起来兼容性很差，还是不推荐使用，目前用的很舒服的还是px和rem，

安利一对换算单位的网站，帮助更好的理解现在常用的px/em/rem之间的倍数关系：
http://pxtorem.com/ px 换算 rem

http://pxtoem.com/ px 换算 em

GPU云服务器云服务器应用的是rem单位 px2vw px2rem html 单位vw

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53916.html

<em>pxem>、em、rem、%、vw、vh、vm这些单位的区别

摘要：就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是的，表示的是水平方向是个像素点，垂直方向是个像素点。视口被均分为单位再举个例子浏览器宽度相对于视口的宽度。等于视口高度的。 1.px px就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 2.em em参考物是父元素的fo...

xcc3641 2019-08-30 10:58 评论0 收藏0
【CSS练习】IT修真院--练习3-简单界面

摘要：任务三一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单并继续学习优化让布局更好适应屏幕变化使用了盒模型及百分比了解区别在中应用图片处理学习明天计划的事情深度思考手机分辨率和网页的区别周末补学任务四计划及简单编写遇任务三、一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单Demo并继续学习优化. 让布局更好适应屏幕变化(使用...

MrZONT 2019-08-29 15:36 评论0 收藏0
视口相关单位的应用 —— 别说你懂CSS相对单位

摘要：还有视口相关单位，依赖浏览器的视口大小来定义长度的。如果你不熟悉视口相关单位的话，在这里简单介绍一下。笔记视口相关单位对于大多数浏览器还是一项比较新的特性，所以当你试图把这个特性和其他样式混搭时，有可能会有一些很奇怪的。前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对rel...

lbool 2019-08-29 16:06 评论0 收藏0
CSS中常见的长度单位

摘要：可视区高度单位和可视区宽度单位单位与可视区的高度相关。的值等于可视区高度的。因此会随着父元素对应的长度值得变化而变化。 px - 像素 px 是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等, 它是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI px 单位的值必须是整数值与px相关...

rainyang 2019-08-29 12:21 评论0 收藏0