rem、em和vh、vw和rpx

最新推荐文章于 2024-03-07 12:38:35 发布
最新推荐文章于 2024-03-07 12:38:35 发布
阅读量518 收藏
点赞数 1
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imber___zsk/article/details/115773346
版权

rem和em：

  • rem相对于根标签，即html标签
  • em相对于父元素标签
  • 可以搭配window.onresize,监听浏览器窗口大小
  • 可以搭配媒体查询

vh和vw：

  • vh视窗高度的1%
  • vw视窗宽度的1%
  • 常用：100vh、100vm充满整个屏幕
  • 可以搭配position：fixed布局
  • 可以搭配calc(常用)

rpx:

  • rem需要手动换算，rpx是自动换算
  • 不管手机屏幕是多大，rpx都统一规定屏幕宽750rpx。
  • iphone6的实际宽度是375px。这里就是375px=750rpx，即1px=2rpx
前端imber
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
em,rem,px,rpx,vw,vh的区别与使用
m0_62877814的博客
02-15 1119
em,rem,px,rpx,vw,vh的区别与使用
vh、rpx单位
xiaoma19941027的博客
04-23 1233
1.vh 视窗高度的百分比,1vh代表视窗高度为1%; 2.rpx 小程序中规定,所有的设备屏幕宽度都为750rpx。
px、rpx、em、rem、vw、vh各种像素单位的区别
weixin_47340917的博客
01-18 9777
px、rpx、em、rem、vw、vh各种像素单位的区别 px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。 rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。 em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-si
px、rpx 、em、rem、vw\vh 用法 与 区别
u010534828的专栏
12-20 1049
px、rpx 、em、rem、vw\vh 用法 与 区别
vw vh rpx的区别及应用场景
小柒的博客
04-13 5662
vw vh 这两个单位为根据当前设备可视区的宽高为基准动态计算当前元素的宽高，可以实现当前元素在不同宽高的可视区下以不同的px展现 rpx根据当前设备可视区的宽为基准动态计算当前元素的px的展现 vw和rpx一样，他们底层都是动态换算宽度，以前以为rpx可以动态换算高度，这里的误区纠正，rpx不能根据当前设备的可视区的高度动态计算高度 rpx设置高度的原理为根据当前设备的可视区的宽度动态计算高度...
浅析rem和em和px vh vw和% 移动端长度单位
09-24
移动端开发中的长度单位主要有以下几种：px、em、rem、vh、vw和%。它们各自的特点和用途不同，在移动端开发中扮演着重要的角色。 首先来聊聊em单位。em是一个相对单位，它指的是当前字体的字号大小。浏览器默认字体...
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代表显示器...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
CSS3中的长度单位用于表示网页中元素的尺寸、间距、位置等属性，主要包括像素单位(px)、相对长度单位(em、rem)、视口单位(vh、vw、vmin、vmax)以及其它一些单位(如%、in、cm、mm、pt、pc、ex、ch等)。以下是对这些...
前端单位 前端单位转换 详解
qq_43495913的博客
07-01 535
单位 转换 px 1屏幕实际像素 rpx 微信小程序中的单位 规定屏幕实际宽度 = 350rpx em 1em = 当前元素font-size大小(px) 如果当前font-size大小是em单位 则继承父级 如果没有父级 则取浏览器默认值 rem 1rem = 根元素 font-size大小(px) 如果根元素font-size的大小是rem单位 则取浏览器默认值 pt 1pt = DPI/72; (px) vw 1vw = 1% * 页面实际宽度（px） vh 1...
rpx,px,vw,vh,rem,em优缺点
我是一只蘑菇17的博客
12-22 1551
rpx,px,vw,vh,rem,em rpx rpx是响应式像素，只能在小程序中使用，它把屏幕水平分为750份，可以自动计算适配，在小程序中的最优选择，优先使用，可以精准布局。 px px是固定的像素单位，不能响应，小程序和移动端布局不给予推荐。 vw viewport...
小程序中使用rpx单位,布局适配方案（rpx、px、vw、vh）
热门推荐
qq_37916164的博客
11-15 1万+
1:小程序中使用rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx =...
前端每日一练：px，rpx，vw，vh，rem，em 的区别
最新发布
SAXX2的博客
03-07 649
px，rpx，vw，vh，rem，em 的区别,当涉及到网页和移动应用的开发，我们通常需要考虑到不同设备屏幕的尺寸和分辨率适配，因此使用不同的单位来表示长度和布局。在编写 CSS 样式时，根据设计需求和布局适配的要求选择不同的单位。使用相对单位（如 rpx、vw、vh、rem、em）可以更好地适应不同屏幕尺寸，实现响应式设计。
对px、rpx、 em、rem、vw、vh 的了解，px 和 em 的区别？在网页中的使用奇数还是偶数的字体?自定义字体的使用场景？如何实现小于12px的字体效果？实现多行文本溢出省略效果，考虑兼容性
星辰迷上大海的博客
01-05 1141
px是最常用的单位，rpx用于小程序中的自适应布局，em和rem用于相对于父元素和根元素的字体大小，vw和vh用于相对于视窗宽度和高度的单位。
移动端根据屏幕宽度适配rem
weixin_30376509的博客
09-10 227
常见设计稿尺寸为 750px ， 此处以 750 为基准，当屏幕宽度为750px 时设置 html 根节点的 font-size 为 100px，1rem = 100px。故此，将屏幕宽度像素与750 的比值与 100px 相乘，得到最后的 font-size 为 html 的字体大小。后面的样式书写中，即可按照设计稿尺寸进行转换，(设计稿尺寸 × 0.01) rem <script...
设置屏幕宽度=10rem
yuuuuchang的博客
03-09 1051
(function () { document.addEventListener('DOMContentLoaded', () => { document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'; }, false); })(); 按需可调...
rpx
a44185的博客
05-19 552
文章目录rpx是什么rpx和rem的区别原理rpx和iPhone6的关系 rpx是什么 rpx是一个单位。 rpx和rem的区别 rpx和rem一样，都是解决屏幕自适应的尺寸单位。 但是，rem需要手动换算，rpx是自动换算。 原理 不管手机屏幕是多大，rpx都统一规定了屏幕宽为750rpx。 1rpx的实际宽度，是屏幕宽度的750分之一。 rpx和iPhone6的关系 iphone6的实际宽度是375px。所以，这里就是375px=750rpx，即1px=2rpx ...
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、付费专栏及课程。

余额充值