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

最新推荐文章于 2022-12-22 16:24:54 发布
置顶 最新推荐文章于 2022-12-22 16:24:54 发布
阅读量2k 收藏 7
点赞数
分类专栏： web前端基础 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44082369/article/details/108140244
版权

px、em、rem、vm、vh、vw（除px都是百分比计算）

em：根据其父元素的font-size来计算，默认1em=16px

rem: 和em相同，只是rem是相对于根元素。如body font-size=10px/62.5%;

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

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

vh：可视区高度

北极飞人
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的自定义布局（vm/vh）
AyayaOVO的博客
07-11 1853
目录 1. px与视口 2. % 3. 媒体查询 4. rem 5. vm/vh 1. vw/vh的定义 css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下： 这里我们发现视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。vw和%的区别为： 从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这
浅析rem和em和px vh vw和% 移动端长度单位
09-24
下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
CSS的px、em、rem、%、vw、vh、vm 单位区别
思维小刀
04-30 1927
https://blog.csdn.net/weixin_34255793/article/details/91473281?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlo
vw，vh，vm 的使用
weixin_30951743的博客
06-07 641
vw是相对屏幕宽度的百分比，vh是相对屏幕高度的百分比，还有vmin和vmax就是以宽或者高中小的或者大的为基准的百分比，现在的项目中用的都是vw，因为高度是根据内容的多少而不固定的。 转载于:https://www.cnblogs.com/lijianjian/p/9153328.html...
px、em、rem、%、vw、vh、vm等单位有什么区别？
weixin_34006965的博客
12-26 948
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【px、em、rem、%、vw、vh、vm等单位有什么区别？】 px、em、rem、%、vw、vh、vm等单位有什么区别？ 大家好，我是IT修真院西安分...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
px、em、rem、%、vw、vh、vm的区别
Ldajiangyou的博客
04-07 1105
px px 就是 pixel 的缩写，意思是：像素 px 就是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。 px 是我们网页设计常用的基本单位。通过px可以设置固定的布局或者元素大小，缺点是不能弹性。 em em的值并不是固定的，会继承父级元素的字体大小参考物是父元素的font-size（浏览器默认字体是16px），具有继承的特点。如果自身定义了 font-size 那么会按自身来计算，整个页面内1em不是一个
vw vh vm
Jana Jing的分享
03-15 3368
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。 ...
rem、vw可伸缩布局框架（fpx）
vv_bug
08-05 900
前言 前面我们分析了webpack，最后还实战了一个vue的项目： webpack实战之（手把手教你从0开始搭建一个vue项目） 手把手教你从0开始搭建一个vue项目(完结） 强烈推荐大家去阅读一下前面的文章哈！ 今天我们带来点干货，我们利用前面的知识撸一个h5移动端适配的框架，我们取名为"fpx-css-loader"。 说到h5移动端适配的，大家都会想到rem跟vw，我们去caniuse看一下这两个方案的兼容性： rem 可以看到，绝大多数的浏览器是兼容的，平时项目用它完全是没毛病！ vw vm
px、em、rem、%、vw、wh、vm等单位有什么区别？
weixin_44273311的博客
05-06 343
1.背景介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。 2.知识...
rem vm 自适应屏幕大小布局
RenBaiLi的博客
09-05 591
一丶 rem 适配方案： Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具: postcss-pxtorem是一款postcss插件，用于将单位转化为rem lib-flexible用于设置rem基准值 安装并引入插件: 1.安装依赖 cnpm install lib-flexible postcss-pxtorem --save-dev 2. main.js 导入 1.创建.postcssrc.js module.exports...
两种移动适配方案——rem、vmvh
m0_67391401的博客
03-17 919
移动适配 1. rem 媒体查询 flexiable.js 适配 2. vm/vh 移动适配指的是在屏幕宽度不同时，网页元素尺寸不同（等比缩放） 1. rem rem单位是相对单位，是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 例如在HTML字号大小为20px时，box盒子的宽度为5_20=100px，高度为3_20=60px /* 1rem = 1html标签字号大小 */ html { font-size: 20px; } .box {
vm vh移动端布局及 bilibili官网移动端首页布局
薛定谔的猫
12-22 1061
市场上的移动端大多数为flex布局，此时我们用到了rem这个单位，但是rem需要媒体查询，要根据页面是尺寸进行修改，而vm/vh省去各种判断和修改，像B站就通过vue和vm写的。为什么现在还是px，和人用的多，这是因为vm/vh的兼容性比较差，主要用于移动端开发。我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所有开发中使用vw就好啦(等比例缩放)。当前屏幕视口是375px，则1vm就是3.75px,如果当前视口为414，则1vh就是4.14px。超级简单，元素单位之间使用新单位vw/vh即可。
px、em、rem、vm、vw 、vh、vmin 、vmax区分
a153052的博客
12-20 1133
Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font...
数据大屏vm vh适配解决方案
逆袭的菜鸟X
11-18 780
rem弹性布局，在html文件头部放入一大段压缩过的js代码很难受，但vw能让你的代码更纯粹.弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下。rem的优点：移动端rem布局比vw主流的原因 兼容性。弊端之二：html文件头部需插入一段js代码。
px、em、rem、%、vw/vh、vm 各自代表的含义
MySundays的博客
08-17 1751
目录 1、px 2、em 3、rem 4、% 5、vw 6、vh 7、vm 补充： css还有哪些长度单位？ 1、px px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。px就是设备或者图片最小的一个点，比如，电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 px是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。 特点是： em的值并不是固定的； em会继承父级
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、付费专栏及课程。

余额充值