前端单位rpx、px、em、rem、vh、vm、%区别

最新推荐文章于 2024-05-15 10:07:50 发布
最新推荐文章于 2024-05-15 10:07:50 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： css vue 文章标签： java javascript uni-app 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limif/article/details/126934622
版权
vue 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏

    rpx    相当于把屏幕宽度分为750份，1份就是1rpx
    px    绝对单位，页面按精确像素展示
    em    相对单位，相对于它的父节点字体进行计算
    rem    相对单位，相对根节点html的字体大小来计算
    %    一般来说就是相对于父元素
    vh    视窗高度，1vh等于视窗高度的1%
    vw    视窗宽度，1vw等于视窗宽度的1%

 

摩羯柚子
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序中单位rpx和rem的使用
11-29
这篇文章主要给大家讲解了rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起  微信小程序官方文档  >web app变革之rem  >rpx单位官方文档  >rpx单位基础介绍 如果看完上面几篇文章，我们开始...
查看内容 微信小程序rpx、px、rem等尺寸间关系浅析
03-29
最近开发微信小程序，在写样式表的时候发现用PX的效果不太理想，而官方文档用rpx来做响应式布局单位，就仔细研究了下，在此做个小总结： 这里先引用官方定义的尺寸单位‘rpx’：可以根据屏幕宽度进行自适应。规定...
px、rpx、em以及rem的区别与用法
m0_74265396的博客
11-06 1433
rem：相对于根元素字体大小，根据根元素字体大小计算，设置在根元素上，一般默认为16px。px：像素，是绝对单位，不会随字体大小变化而变化，像素值越大，元素越大。使用方法：直接添加数值，如font-size: 12px;rpx：相对像素，是微信小程序中的尺寸单位，可以根据屏幕宽度进行自适应缩放，一个屏幕宽度为750rpx。em：相对于父元素字体大小，是相对单位，根据父元素字体大小计算。总体来说，px和rpx是固定的绝对长度单位，而em和rem是相对长度单位，根据父元素或根元素的字体大小计算。
CSS---px rpx pt em rem四种单位总结
前端与计算机相关知识的分享，博主的qq523235674
02-12 3809
1.px像素（Pixel） 相对长度单位。像素px是相对于显示器屏幕分辨率而言的 2.rpx rpx :微信小程序开发中新出了尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 设备 rpx换算px (屏幕宽度/750) ；px换算rpx (750/屏幕宽度) ;px属于逻..
2024年最新Html-理解前端开发中单位(em单位和rem单位)和网络地址，2024年最新2024前端经典面试题
最新发布
2401_84411822的博客
05-15 215
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它.d1 {.d2 {.d4 {.d3 {.d5 {可可相对单位相对于父元素的大小可可可可可可可可效果图px一般我都是使用px来设置我们的文本，因为它比较稳定和精确。但是px本身却存在一些问题，当用户在浏览器我们的页面时，如果他改变了浏览器的字体大小，这时会使我们的Web页面布局被打破。
web前端网页单位、像素、px、rpx、em、rem、vw、vh、vm、%、fr
04-20 2120
web前端网页单位、像素、px、rpx、em、rem、vw、vh、vm、%、fr
HTML中使用 rpx 单位
hexianfan的博客
05-23 659
【代码】HTML中使用 rpx 单位。
vue——VM对象和基础指令
qq_56668869的博客
08-29 2258
vue、VM对象和基础指令、插值表达式、文本指令、属性绑定
微信小程序rpx、px、rem等尺寸间关系浅析
03-29
最近开发微信小程序，在写样式表的时候发现用PX的效果不太理想，而官方文档用rpx来做响应式布局单位，就仔细研究了下，在此做个小总结： 这里先引用官方定义的尺寸单位‘rpx’：可以根据屏幕宽度进行自适应。规定...
微信小程序中rpx与rem单位使用
03-29
本文讲解rpx和rem应用于微信小程序，如果你还没有入门，建议先从下面看起： 微信小程序官方文档 web app变革之rem rpx单位官方文档 rpx单位基础介绍 如果看完上面几篇文章，我们开始进入正题吧~~ 一、rem的使用 1） ...
前端框架MVVM（整理）
u011402106的博客
05-12 1033
一、总结 vm层（视图模型层）viewmodel 通过接口从后台m(model)层请求数据，vm层继而和v(view)层实现数据的双向绑定。 二、MVVM和MVC的关系 1.mvc中c(controller)层被转换成vm（viewmodel）层 2.MVVM是model(接口）-view(视图）-viewmodel(视图模型层）的简写，就是mvc的改进版 3.MVVM更好的实现了前后台分离 三、MVVM框架编码实例 Vue的View模板： <div id="app"> <p&gt
HTML5中如何实现rpx布局
杨若瑜的技术博客
12-10 4166
HTML5中如何实现rpx布局
px, em, rem, rpx, vh等css里的单位
前端探索
07-07 419
px： css像素单位；（在pc端 “可以” 等同于物理像素，移动端则不一定！！！） em： 相对 父盒子fontsize 的单位； rem： 相对 html根标签fontsize 的单位； rpx： 微信小程序中独有的自适应屏幕大小的相对单位，所有屏宽均为750rpx； (以 iphone6为例， 屏宽375px, 则 1px = 2rpx) vh： 1vh 等于视口高度的1%； vw：1vw 等于视口宽度的1%； vmin : 选取 vw 和 vh 中最小的那个 vmax ..
如何在普通Html中实现类似小程序中的 rpx 动态单位自适应效果
Gochan_Tao的博客
06-18 3293
我们知道小程序 css 有个rpx单位，它是默认屏幕宽度是750rpx，不区分屏幕分辨率 如何从设计稿的px转为rpx，计算方法是： css高度(rpx) = 设计稿高度/ (设计稿宽度/750) css宽度(rpx) = 设计稿宽度/ (设计稿宽度/750) 同理： 普通 html 中基准宽度是 100vw，那么 css高度(vw) = 设计稿高度/ (设计稿宽度/100) css宽度(vw) = 设计稿宽度/ (设计稿宽度/100) 字体也可以这样计算，单位都是vw，这里的vw效果跟小程序的rpx效果一
px、em、rem、vm、vh、vw的区别
langziangTom的博客
02-17 946
px、em、rem、vm、vh、vw的区别
前端HTML中vm和vh单位的使用
个人笔记
03-03 2380
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="t
什么是rpx尺寸单位？
热门推荐
小鱼儿~同学
02-11 2万+
rpx （ responsive pixel）响应单位 rpx是微信小程序独有的、解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配 rpx 和 px之间的换算 在普通网页开发中，最常用的像素单位是px 在小程序开发中，推荐使用rpx这种响应式的像素单位进行开发 以...
UNI-APP开发之style单位（upx、rpx、vw、vh、px）之间的转换
沧海龙腾LV的博客
11-25 1万+
1.vw：1vw等于视口宽度的1%。 100vw等于窗口的宽度 2.vh：1vh等于视口高度的1%。 100vh等于窗口的高度 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 uni-app使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app规定屏幕基准宽度750upx。 开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换...
小程序中所使用的单位与布局计算
qq_34639706的博客
11-12 619
基础问题记录下：
rpx px em rem % vh vw的区别
06-28
rpx是小程序中的单位，可以根据屏幕宽度进行自适应缩放，适用于小程序开发。 px是像素单位，是网页开发中最常用的单位，不具有自适应性。 em是相对于父元素字体大小的单位，适用于网页开发中的字体大小设置。 rem...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值