[css]移动web中，rem和vw/vh的区别

最新推荐文章于 2024-06-11 14:09:23 发布
最新推荐文章于 2024-06-11 14:09:23 发布
阅读量535 收藏 1
点赞数 2
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/belloc_li/article/details/122967001
版权

rem和vw/vh的区别

在移动端网页中常用的两种相对单位就是rem和vw/vh，那么他们都有什么区别呢？

rem

  1. rem数值是相对于html标签的字号（一般设置为当前设备视口宽度的十分之一）大小来决定的
  2. 在不同的移动设备上需要不断地修改html标签的字号大小，以适应设备
  3. 需要媒体查询media
  4. 需要引用flexible.js
  5. 目前在市场上比较常见，如手淘之类都在用

vw/vh

  1. vw/vh在同一个网页中只能使用一个，不可混用，否则盒子可能会出错
  2. vw/vh的数值是相对于设备视口宽/高的1%来决定的
  3. 适应不同的设备，省去了多余的判断和修改
  4. 是未来的趋势，如小米和b站之类的在用
嘻咦啊写
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rem和vw,vh的介绍
m0_64969829的博客
12-31 1275
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 rem的介绍前言一、rem是什么？二、手写rem布局三、rem适配方案 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、rem是什么？ rem是相对单位,相当于html页面中font-size的一个字体大小 它可以自适应屏幕的宽高 二、手写rem布局 代码如下（示例）： rem(); //页面刷新后依然存在 window.onresize=function(){ //每次点击都会重新调用 rem(); } func
前端css高频面试题——em/px/rem/vw/vh的区别？
weixin_47450807的博客
04-06 448
一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大 小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对 长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之 所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺 寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需
rem和vw的分析比较
前端啤酒屋
10-15 6638
rem： 首先rem是css单位，相比于px固定的像素单位，rem是相对像素单位，更加的灵活。 需求存在： 现在移动端各种屏幕的出现，适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。 一、基本原理： 我们在页面中写rem，由于rem是相对于根元素字体大小来计算的，那么就可以实现自适应的效果。 Rem原理举例： 设计稿宽度：x px 移动设备宽度：y px Html中font-size...
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
最新发布
qq_42267338的博客
06-11 1732
/ 定义设计稿的宽高// px转vw。
rem和vw的区别
weixin_50756332的博客
03-12 472
提示：我们在移动适配的时候，可以使用rem和vh这两种相对单位进行布局，那么这两者有何区别呢？提示：以下是本篇文章正文内容，仅供参考这两种布局为了方便使用，常配合less进行使用。rem布局在使用时，使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。相对而言vw布局稍微简单一些。与rem不同的是，rem是根据HTML根字号大小去改变，而一般把HTML根字号设置为视口宽度的1/10。vh和vw是根据视口宽度和高度的1/100。因此1rem = 10vh。
[css] 你有用过vw布局吗？和使用rem有什么区别？
歌谣的博客
02-10 313
[css] 你有用过vw布局吗？和使用rem有什么区别？ vw/vh 是屏幕视图的百分比， rem 是根据 html的font-size 来设置的相对值。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
移动端布局rem与vw的区别
04-14 1955
如果你的页面只使用于微信、QQ，那绝对能放心使用vw单位
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
适配方案rem和vw/vh
m0_62371650的博客
07-24 121
适配方案rem和vw/vh
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
【新】移动端web （flex布局 rem / vw vh 布局）
chenlaining的博客
04-26 420
1.pc端和移动端网页的不同点 ①pc屏幕大，网页用版心 ②手机屏幕小，网页宽度多数为100% 2.分辨率（越高越好） 物理分辨率：生产屏幕时就固定的，不可被改变 逻辑分辨率（设备宽度）：由软件驱动所决定 （制作网页时考虑）375×667 3.视口（viewport）：浏览器显示页面内容的屏幕区域 无视口标签则宽度为980像素（默认） 使用mate标签设置视口宽度，制作适配不同设备宽度的网页（自动生成） 作用：设定html的宽度，使所制作的网页宽度与其设备相适应 pc端的视口尺寸不一致，根
前端知识——css 之移动端适配方案vw、rem详解
weixin_42771853的博客
04-04 6673
px是pixel单词的缩写，翻译为像素。像素是影响显示的基本单位。像素单位常见的有三种像素名称：设备像素（也称之为物理像素）；设备独立像素（也称之为逻辑像素）；CSS像素设备像素，也叫物理像素。设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小比如iPhone X的分辨率 1125x2436，指的就是设备像素设备独立像素，也叫逻辑像素。
px rem em vw vh 详解
前端工程师的博客
04-09 222
再css 中单位分为 相对长度单位 和绝对单位 相对长度单位 有em ex ch vw vh rem 绝对单位有cm px mm pt pc px 表示的是像素点 而在移动端的像素大小 是根据像素比 显示的不是唯一的 可以通过 window.devicePixelRartio 获得是像素比 设备像素比 = 物理像素/设备独立像素 设备像素比 越高 越清晰 em 是相对于父元素的大小 rem 是相对与html根元素 vh vw 主要用于页面视口大小布局 ...
移动端适配布局rem和vw
jieyucx的博客
07-31 937
在移动端适配布局方案中，rem和vw都是值得推荐的方案。使用rem可以根据根元素的字体大小来进行相对单位的适配，而vw则是根据视口的宽度来进行适配。在选择使用哪种方案时，需要根据项目的具体情况进行选择。无论是使用rem还是vw，都需要充分考虑各种屏幕尺寸和设备像素密度的差异，以达到最佳的适配效果。希望这篇文章能为你提供一些帮助，让你更加深入地了解移动端适配布局的相关知识。
css单位之——rem与vw/vh要点辨析
慢才后生
02-25 1698
rem： 1rem = 根元素html的font-size值。 当页面中所有元素都使用rem单位时，你只需要增加一小段js代码，通过监听设备尺寸来改变根元素的font-size值，那么所有元素就会按比例放大或者缩小，以此达到一套布局适应多种移动设备的目的。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；弊端之二：html文件头部需插入一段j...
【前端】移动适配：rem和vw/vh
m0_64538862的博客
03-13 1975
1.移动适配，rem，rem解决方案，Less，less注释规范，less运算，less嵌套写法，less中的变量，导入.less文件，导出.less文件，vw/vh
CSS布局单位之em、rem、vw和vh
wdhxs的博客
11-11 362
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
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
rocktanga的博客
10-12 562
用这几个单位就可以做自适应布局了，尤其是下面的vh，解决了高度不能使用百分比的问题，很爽。 另外，自适应除去用下面这些单位之外，还可以用width的一些新属性，fill-available、fit-content、max-content、min-content 一、rem 1、使用js来使rem自适应 最新领悟重点，关于设计图和量出来的值使用rem：重点为根元素的像素值。我们在js里面把根元素的像素值用读取的屏幕宽度(当然写代码的时候肯定屏幕宽度和设计图宽度一样)除以设计图宽度，即$("html.
rem布局原理深度理解（以及em/vw/vh）
diaolanbeng0962的博客
05-19 367
一、前言 　　我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。 二、几个概念 　　这里就不讲那些，物理像素、设备像素比了，可以自己查阅。要去理解rem/em/vm/vh等，首先要...
移动Web适配策略：rem与vw/vh解析
"移动Web移动端适配主要涉及CSS中的长度单位rem和vw/vh的使用，以及媒体查询在实现响应式设计中的应用。rem作为相对单位，常用于移动适配，而vw/vh是与视口宽度和高度相关的单位，被视为未来的解决方案。通过媒体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值