px、em、rem、vm、vh、vw的区别

最新推荐文章于 2024-04-17 18:26:42 发布
最新推荐文章于 2024-04-17 18:26:42 发布
阅读量1k 收藏 1
点赞数
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/langziangTom/article/details/129093754
版权

em：根据其父元素的font-size来计算，默认1em=16px,特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。

rem: 和em相同，只是rem相对于根元素html。这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。

vm: 根据可视区宽度和高度最小的计算，1vm=1%可视区大小

vw: 是vm的具体，指可视区宽度

vh：可视区高度
 

langziangTom
关注
移动开发适配，px转vm总结
qq_42331575的博客
05-28 2288
一.问题 如图：如果使用px做为单位时，字体“注册bilibili页面”并不会跟着页面大小变化而变化，那么我们要做到字体大小等根据窗体自适应，则可以使用rem,vm等单位。 二.解决办法 我选择使用vm作为单位 公式： px / 设计稿(宽/高) *100 = vm 如果每个px都要自己去计算一遍太麻烦了，vscode中提供了一些转换插件帮助我们自动计算，vm单位的转换插件可以用 px-to-vm 具体用法如下： 1.安装px-to-vm插件 ...
px、em、rem、%、vw、vh、vm等单位有什么区别？
IT修真院：初学者转行到互联网的聚集地
11-05 1309
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能。 大家好，我是IT修真院西安许恒倩，一枚正直纯洁善良的web程序员。 今天给大家分享一下官网CSS任务三深度思考中的知识点——px、em、rem、%、vw、vh、vm等单位有什么区别？ （1）背景介绍： 传统的项目开...
vw vh vm
Jana Jing的分享
03-15 3416
1、vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 2、vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 ...
vw vh vm
weixin_44580808的博客
08-13 219
1、vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 2、vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 3、vm css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px
px、em、rem、%、vw、wh、vm等单位有什么区别？
weixin_41506097的博客
05-08 1156
大家好，我是IT修真院上海分院第7期的学员，一枚正直纯洁善良的web前端。今天给大家分享一下，px、em、rem、%、vw、wh、vm等单位有什么区别？希望能够给大家带来一些收获和思考。目录1.背景介绍          2.知识剖析           3.常见问题4.解决方案        5.编码实战       6.扩展思考         7.参考文献      8.更多讨论1.背景介绍...
vw，vh，vm 的使用
weixin_30951743的博客
06-07 671
vw是相对屏幕宽度的百分比，vh是相对屏幕高度的百分比，还有vmin和vmax就是以宽或者高中小的或者大的为基准的百分比，现在的项目中用的都是vw，因为高度是根据内容的多少而不固定的。 转载于:https://www.cnblogs.com/lijianjian/p/9153328.html...
面试官：说说em/px/rem/vh/vw的区别?
m0_50125215的博客
04-28 627
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、p.
理解CSS常见的px/em/rem/vh/vw尺寸单位
Wion Wan
03-25 769
最近在做手机端和PC端的项目，用到了CSS单位的问题，于是想着空下来把CSS单位部分的知识自己写写CSS梳理一下； CSS中常见的单位 px–最常见的，页面按照精准样式展示;属于绝对单位； em–基准点为父节点字体的大小，如果自身定义了font-size按自身来计算；也就是说这个em不是一个固定值，属于相对单位； rem–相对单位，r可以看作为 ”root“,结合em，理解为相对根节点HTML的...
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
m0_61205381的博客
06-20 304
整理常见的单位 px em rem % vw vh vmin vmax rpx
px|pt|rpx|em|rem|vm|vh
qq_41864339的博客
12-29 262
px pt 参考 pt em em 参考 vh vw 参考 一. 概念解析 px:pixel,屏幕上显示数据的基本点 pt :point,印刷业常用单位 dpi(ppi):dot per inch(pixel per inch) 每英寸的像素点 rpx:responsive pixel（微信小程序专用）可以根据屏幕宽度进行自适应 em:相对于父元素的字体大小，em会继承父级元素的字体大小 rem:root em,相对于HTML根元素的字体大小 vw:view width 视口宽度 100.
css——vh、vm、px、rem
weixin_43551242的博客
01-03 516
css3的视口单位vh、vw可实现自适应： vh、vw是视口单位(就是根据浏览器窗口的大小单位，不收显示器分辨率的影响)，可以根据窗口的大小来自动调节字体大小，做的响应式页面、但对于不同浏览器的兼容性要求较高 px是对应我们电脑和其他显示器的分辨率，这样就会出现问题，使用px单位需要注意根据不同电脑的分辨率来做自适应会有点麻烦的 em是相对于长度单位，相对于当前对象内文本的字体尺寸，没有设置是默认浏览器是1em=16px。如果使用em做自适应可以把body的 font-size：62.5%，16px*6
px、em、rem、%、vw、vh、vm的区别
Ldajiangyou的博客
04-07 1138
px px 就是 pixel 的缩写，意思是：像素 px 就是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。 px 是我们网页设计常用的基本单位。通过px可以设置固定的布局或者元素大小，缺点是不能弹性。 em em的值并不是固定的，会继承父级元素的字体大小参考物是父元素的font-size（浏览器默认字体是16px），具有继承的特点。如果自身定义了 font-size 那么会按自身来计算，整个页面内1em不是一个
rem,em,vw,vh,vm的区别
最新发布
m0_51181022的博客
04-17 1140
rem、em、vw、vh、vm都是相对单位，相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。它们之间的区别是什么呢？
【前端】移动适配：rem和vw/vh
m0_64538862的博客
03-13 2084
1.移动适配，rem，rem解决方案，Less，less注释规范，less运算，less嵌套写法，less中的变量，导入.less文件，导出.less文件，vw/vh
适配、px,vm,rem，百分比，vm/vh、像素
qq_36582776的博客
04-12 637
1.单位 绝对单位：px 相对单位：em、rem、百分比、vm/vh px：相对于屏幕分辨率 em：相对于父元素的font-size，所以不同位置设置1em是不同的 rem：rem是CSS3新增的一个相对单位，但相对的只是HTML根元素 font-size。rem只适用于固定尺寸。 百分比：相对长度单位，相对于父元素的百分比值 vm、vh、vmin、vmax是一种视窗单位，也是相对单位。 vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh：视窗高度...
rpx px em rem % vh vw的区别
06-28
rpx是小程序中的单位，可以根据屏幕宽度进行自适应缩放，适用于小程序开发。 px是像素单位，是网页开发中最常用的单位，不具有自适应性。...vh和vw是相对于视口高度和宽度的单位，适用于网页开发中的响应式布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值