em rem px vw vh用法

最新推荐文章于 2023-11-22 20:41:47 发布
最新推荐文章于 2023-11-22 20:41:47 发布
阅读量711 收藏
点赞数
分类专栏： css 文章标签： css

px 像素，相对长度单位，相对于显示器屏幕分辨率而言

em相对长度单位，相对于当前对象内文本的字体大小；当前对象内的文字大小没有设置，则相对于浏览器的默认字体大小

任意浏览器默认的字体高度是16px,所有未经调整的浏览器都符合1em=16px,为了简化

font-size的换算，需要在body选择器中声明font-size=62.5%,这样是的em的值变为16px*62.5%=10px;这样12px =1.2em,10px = 1em,也就是只需要将原来的像素大小除以10就是em的大小

em会继承父级元素的字体大小

rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，这使得只修改根元素就能成比例的调整所有字体大小

vw相对视区的宽度，相当于%

vh相对视区的高度，相当于%


近视眼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
今天又学一招 vh和%的区别 vh的妙用
weixin_43958820的博客
07-07 7367
vh和%的区别 vh的妙用 vh与%的区别 vh是长度单位, vh是根据浏览器视口的高度变化; vw则是根据浏览器视口的宽度变化, 视口就是浏览器的可视区域 把浏览器可视区宽高平均分成100份, 那1vh就是可视区高1/100, 1vw就是可视区宽的1/100, 所以最好的上限设置就是100vh或100vw, 这个看个人需要 %是根据父盒子或根元素的宽高, 来进行百分比宽高显示, 父盒子变化, %等比变化 vh的用法之一 容器滚动条 当盒子的宽高设置了vh和vw后, 并把盒子设置overflow:
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6451
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
vw vh
qq_40774743的博客
08-23 410
1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。   （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表...
vw / vh属性布局了解及使用
m0_62181310的博客
04-28 4561
使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果 目录 一、vw和vh基本使用 二、vw和vh布局流程 三、vh布局弊端 一、vw和vh基本使用 vw和vh为相对单位，相对视口尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m.
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2609
一、介绍 传统的项目开发中，我们只会用到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单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析rem和em和px vh vw和% 移动端长度单位
09-24
下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
px、em、rem、%、vw、vh单位之间的区别
01-08
本文将详细介绍px、em、rem、%、vw和vh这六个单位的区别及其应用场景。 1. **px (像素)**：像素是绝对长度单位，代表显示器上的最小物理点。1px始终表示相同大小的点，不会随浏览器窗口或用户设置变化。它适用于...
Web前端—移动Web第四天（vw适配方案、vw和vh的基本使用、综合案例-酷我音乐）
最新发布
放下华子我只抽RuiKe5的博客
11-22 453
在移动Web开发的第四天，我们主要学习了vw适配方案、vw和vh的基本使用以及综合案例-酷我音乐。首先，我们了解了vw适配方案，它是一种相对单位，可以根据屏幕宽度进行自适应。接着，我们学习了vw和vh的基本使用，vw表示视口宽度的1%，vh表示视口高度的1%，通过这两个单位可以实现更加精确的布局。最后，我们通过一个综合案例-酷我音乐，将所学知识应用到实际项目中，实现了一个简单的移动端音乐播放器界面。
rem、em、vh、px
accumulate_的博客
11-19 459
rem: rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。 em: 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh: 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。 px: px像素（Pi
搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax
热门推荐
javaloveiphone的专栏
04-11 2万+
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 看下面例子： HTML:<body>body <div class="div1">div1 <div class="div2">div2 <div class="div3">div3
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
张木期的博客
07-29 5243
1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体...
px、em、rem、vm、vh、vw的区别
weixin_44082369的博客
08-21 2064
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：可视区高度 ...
CSS中px/rem/em/vw/vh 的区别
大大大鸡腿的博客
08-04 679
1
CSS3中新增单位rem、em、vh、vw等的用法
jenreal的博客
05-27 497
以前刚接触前端的时候，用来控制大小的单位大家都习惯用像素（px），但是随着时代的进步，响应式布局和跨平台设备的web应用已经成为主流，再使用像素单位来控制大小就有点捉襟见肘了。这时候，很多更为灵活的具有百分比性质的单位逐渐替代了像素单位。 现如今，浏览器都允许用户重新设置文字的大小，如图： 但是很多网页在body的样式上直接写死了文字大小，比如为14px或者16px，这样用户修改浏览器的字号是没法改变网页文字大小的，这对视力不好的人很不友好啊。 如图，看看你有这种坏习惯吗？还设置文字居中，这个前端不合格！
css的视口单位vw、vh的使用
Lval的博客
04-17 1436
什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 视口单位 根据CSS3规范，视口单位主要包括...
移动端适配单位vw和px的转换
qq_43706131的博客
08-01 3123
移动端适配单位vw和px的转换
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、付费专栏及课程。

余额充值