px、em、rem、vh、vw

最新推荐文章于 2022-06-22 16:38:48 发布
最新推荐文章于 2022-06-22 16:38:48 发布
阅读量244 收藏
点赞数
分类专栏： 面试 文章标签： css rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42239440/article/details/107251188
版权

px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

 

代码：

 

 

 

em:

 

 

 

1planet
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue的自定义布局（vm/vh）
AyayaOVO的博客
07-11 1888
目录 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单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这
前端css高频面试题——em/px/rem/vw/vh的区别？
weixin_47450807的博客
04-06 447
一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大 小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对 长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之 所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺 寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需
了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
disui4739的博客
02-26 392
　　本人java菜鸟一名，若有错误，还请见谅。 　　1、px和em和rem的定义和区别 　　px：px像素，是相对单位，相对于屏幕的分辨率而言，也就是说，当屏幕的分辨率不同那么px相同，实际看到的大小也会不同。 　　　　例如：当一台手机的分辨率为1024*768来说，也就是说，这屏幕由纵向的1024个像素点和横向的768个像素点组成，所以当一个组件的width为200px的时候在这...
布局：px to vw、vh
snowball的博客
12-08 960
一、背景： vue项目，移动端实现自适应布局 二、选用方案： 视口单位（viewport units）： 三、理解视口单位： 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，.
前端中网页布局px ,rem,em,vw,vh的认识和区别有哪些？
ccssr的博客
06-22 5023
网页开发中，常会涉及到各种相对单位，px,rem,em,vw,vh你是否全面了解会使用，并且可以轻易区分它们，如果你特别头疼不知道它们是什么怎么用，欢迎点击阅读收藏哦
Vue前端适配自定义vh和vw方案
qq_41497443的博客
10-19 3595
Vue前端适配自定义vh和vw方案 话不多说，直接上代码 1、在assets/css文件下新建global.scss，代码如下：以适配屏幕为1920x1080为例，其他尺寸根据具体需求修改即可。 $vm_base: 1920; $vh_base: 1080; // 计算vw @function vw($px) { @return ($px / $vm_base) * 100vw; } // 计算vh @function vh($px) { @return ($px / $vh_base) * 10
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析rem和em和px vh vw和% 移动端长度单位
12-13
本文主要探讨了rem、em、px、vh、vw以及%这几种常见的长度单位，分析它们的特点与应用场景。 1. **px（像素）** - 像素是绝对单位，表示屏幕上的一个物理点。1px始终等于1个物理点，不会因设备或浏览器设置而改变...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
vue-cli配置移动端自适应，将px转化为rem
女神修炼日记
04-16 753
1、通过npm 下载 lib-flexiblenpm install lib-flexible --save2、在main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'3、通过设置meta标签，设置设备宽度及缩放比例<meta name="viewport" content="width=device-width, initial-s...
vue中px 转 vh/vw
文木博客
12-03 1825
vue 中px 单位转换成 vw/vh
【css外边距塌陷】外边距合并问题解决方案
chaomi_didi的博客
08-24 256
1.父子元素之间的外边距margin合并问题(外边距塌陷) .box { width: 800px; height: 500px; background-color: orange; } .b1 { margin-top: 20px; width: 200px; height: 200px; background-color: pu
h5移动端适配(px-＞vw/vh)
weixin_49295874的博客
12-05 778
vw适配 1.browserslistrc文件 删除 not dead 2. 安装依赖 cnpm i -S postcss-px-to-viewport 3.根目录下创建 postcss.config.js 文件 配置如下: module.exports = { "plugins": { "postcss-px-to-viewport": { "unitToConvert": "px", "viewportWidth": 375,
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6530
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2630
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
前端中几个单位（em、rem、vh、vw）的区别
qq_30351747的博客
08-10 3846
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
Vue项目自动转换 px 为 rem，高保真还原设计图
weixin_33916256的博客
01-31 804
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
热门推荐
Jin's blog
01-11 12万+
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
css1vh等于多少px,css单位px、rem、em、vw、vh
weixin_33732812的博客
08-04 4407
css单位有两种分为相对单位和绝对单位绝对单位有:px相对单位有：rem、em、vw、vh下面我们一起来了解这几个单位吧。1、rem：相对根元素字体大小来计算1rem默认为16px当根元素有font-size时1rem的单位则是font-size的大小下面我们看这个例子html{font-size: 20px;}.rem {width: 20rem;height: 20rem;background...
rpx px em rem % vh vw的区别
最新发布
06-28
rpx是小程序中的单位，可以根据屏幕宽度进行自适应缩放，适用于小程序开发。 px是像素单位，是网页开发中最常用的单位，不具有自适应性。...vh和vw是相对于视口高度和宽度的单位，适用于网页开发中的响应式布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1planet

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值