px rem em vw vh 详解

最新推荐文章于 2024-03-13 14:35:41 发布
最新推荐文章于 2024-03-13 14:35:41 发布
阅读量214 收藏
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45336892/article/details/115559881
版权

再css 中单位分为 相对长度单位 和绝对单位  

相对长度单位 有em ex ch vw vh rem  绝对单位有cm px mm pt pc 

px 表示的是像素点 而在移动端的像素大小 是根据像素比 显示的不是唯一的 可以通过  window.devicePixelRartio 获得是像素比  

设备像素比 = 物理像素/设备独立像素   

设备像素比 越高 越清晰

em 是相对于父元素的大小

rem 是相对与html根元素

vh vw 主要用于页面视口大小布局

 

设备像素、css像素、设备独立像素、dpr、ppi 之间的区别

 

px 是一个相对单位  相对的是设备像素

一个设备独立像素会包含多个物理像素点

 

物理像素点就是 屏幕里面具体有多少个像素点 可能一个独立设备像素点 会显示多个物理像素点

 

 

 

有什么不对的地方往大家多多指正 谢谢  

weixin_45336892
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rem和vw,vh的介绍
m0_64969829的博客
12-31 1269
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 rem的介绍前言一、rem是什么？二、手写rem布局三、rem适配方案 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、rem是什么？ rem是相对单位,相当于html页面中font-size的一个字体大小 它可以自适应屏幕的宽高 二、手写rem布局 代码如下（示例）： rem(); //页面刷新后依然存在 window.onresize=function(){ //每次点击都会重新调用 rem(); } func
px、em、rem、%、vw、vh单位之间的区别
01-08
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2613
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-cplvfx-JJY.Cheng
06-22 8969
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
认识css中的单位：px、em、rem、%、vw、vh。
dz13271116886的博客
08-20 298
1.px px即像素，是绝对长度单位的一种，它的大小是根据用户屏幕显示器的分辨率决定的（因此不同的设备显示相同的像素值也可能会有不同的结果）。 特点：绝对单位，很难适应移动设备。 2.em em为相对长度单位。相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，国外使用比较多。 特点： 1.em的值并不是固定的; 2.em会继承父级元素的字体大小。...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
详解rem 适配布局
12-13
在这种背景下，`rem`（root em）作为自适应布局的解决方案应运而生。`rem`是一个相对单位，它表示相对于根元素（通常是`<html>`）的`font-size`的大小。这意味着，通过调整`<html>`元素的`font-size`，我们可以控制...
css 字体单位之间的区分以及字体响应式的实现详解
09-24
下面将详细讲解常见的几种字体单位：px、em、pt，以及新兴的rem和vw/vh/vmin，并讨论如何实现字体的响应式设计。 1. **px（像素）**： - 像素是绝对单位，基于屏幕分辨率。这意味着在不同分辨率的屏幕上，1px的...
网页样式设计:CSS使用详解
09-20
书中会介绍绝对单位（如px、pt）和相对单位（如em、rem、vh、vw），以及百分比单位和新引入的CSS长度单位，如fr（用于Grid布局）。理解不同单位的用途和相互关系，有助于在不同场景下选择合适的单位进行尺寸定义。 ...
css单位之——rem与vw/vh要点辨析
慢才后生
02-25 1661
rem： 1rem = 根元素html的font-size值。 当页面中所有元素都使用rem单位时，你只需要增加一小段js代码，通过监听设备尺寸来改变根元素的font-size值，那么所有元素就会按比例放大或者缩小，以此达到一套布局适应多种移动设备的目的。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；弊端之二：html文件头部需插入一段j...
[css]移动web中，rem和vw/vh的区别
belloc_li的博客
02-16 526
rem和vw/vh的区别 在移动端网页中常用的两种相对单位就是rem和vw/vh，那么他们都有什么区别呢？ rem rem数值是相对于html标签的字号（一般设置为当前设备视口宽度的十分之一）大小来决定的 在不同的移动设备上需要不断地修改html标签的字号大小，以适应设备 需要媒体查询media 需要引用flexible.js 目前在市场上比较常见，如手淘之类都在用 vw/vh vw/vh在同一个网页中只能使用一个，不可混用，否则盒子可能会出错 vw/vh的数值是相对于设备视口宽/高的1%来决定的 适
CSS布局单位之em、rem、vw和vh
wdhxs的博客
11-11 355
CSS布局单位 文章目录CSS布局单位一、em与rememrem二、使用步骤1.引入库2.读入数据总结 一、em与rem em em与rem不同于px，都是相对长度单位。 em的参考对象是父元素的font-size，其中浏览器默认的font-size是16px。当前元素设置了font-size时，则以当前元素的font-size为参考对象。 .father { /* em是相对父元素来说的 */ /* 父元素没有定义font-size则参考自己的font-size */ font-size: 10
px,em,rem,vw的区别, 如何进行转换?
weixin_48724940的博客
09-13 371
px,em,rem,vw的区别
css中px，em，rem，百分比，vm，vv等属性单位的比较
兜兜的博客
11-18 594
本文简单总结了css的不同单位，其中，px，em，rem是相对于字体大小的单位，vm，vv，百分比是相对于元素大小的单位。
前端知识笔记（十九）———px，em，rem，vw，vh之间的区别
lrx276的博客
12-02 656
现在在你电脑上一个字为16px，大小正好，可能到比你分辨率要高的电脑上，字体16px大小不变，但是分辨率有变化，导致字体在别的电脑上可能会导致不适配的情况发生。例如：这个就很好理解，就是1em就是父元素的一整个字体大小，当然，嵌套的多了容易搞混，尽量不要在嵌套多个元素的时候使用em，个人认为不太好用。：vh类似于vw，不同之处在于它是相对于视窗高度的百分比单位，1vh等于视窗高度的1%。例如：这个跟em的区别就是他不是看父元素，而是看根元素，因为不受父元素的影响，所以适用于自适应。
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
程序员成长指北
12-16 8620
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言当接到可视化大屏需求时，你是否会有以下疑问????如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？ 最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键...
【前端】移动适配：rem和vw/vh
最新发布
m0_64538862的博客
03-13 1684
1.移动适配，rem，rem解决方案，Less，less注释规范，less运算，less嵌套写法，less中的变量，导入.less文件，导出.less文件，vw/vh
前端中网页布局px ,rem,em,vw,vh的认识和区别有哪些？
ccssr的博客
06-22 4997
网页开发中，常会涉及到各种相对单位，px,rem,em,vw,vh你是否全面了解会使用，并且可以轻易区分它们，如果你特别头疼不知道它们是什么怎么用，欢迎点击阅读收藏哦
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6465
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
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、付费专栏及课程。

余额充值