移动端常用单位：px、%、vh、vw、em、rem

已于 2022-06-22 17:45:00 修改
阅读量1.8k 收藏
点赞数 1
文章标签： css
于 2022-06-22 16:26:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44718039/article/details/125411959
版权

px：绝对单位

%：相对单位，相对于父元素

vh：相对单位，相对于可视窗的高度

vw：相对单位，相对于可视窗的宽度

em：针对于父元素的font-size（谷歌浏览器字体默认大小为16px）

rem：针对于根元素html的font-size（移动端一般使用rem，方便计算）

淡颜Amo~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端常用单位——rem
09-16 684
移动端常用单位： ①px：像素大小，固定值 ②%：百分比 ③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位） ④rem（移动端主流）：相对根节点(html)的font大小 ⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一 ⑥vh（视口高度）：相对视口高度比例，1vh相当于...
移动端字体单位该使用px还是rem?
weixin_42213918的博客
05-28 4317
对于只需要适配少部分手机设备，分辨率对页面影响不大的，使用px即可，对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。rem配置参考，适合视觉稿宽度为640px的：<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" n...
前端web移动端学习day04
最新发布
WU3087676106的博客
03-27 944
vw和vh是相对单位，相对视口尺寸计算结果，相对于屏幕的逻辑参数。
移动端常用单位
qq_34771938的博客
10-10 667
px / % / em /rem / vw / vh* / 1. px 2. % 3. em 1em = 1 * font-size, 5em = 5 * font-size 如果自身有 font-size 的话以自身为准，如果自身 font-size 就是以 em 为单位或者没有 font-size 的话，就会从父容器继承。 em 不经常使用，但是有时也会比较好用，如：字符缩进。 4. rem rem 是 root 根元素的 font-size ，即 html 元素的 font-s
移动端页面单位的选择(px em rem)
三七二十一的博客
03-27 2137
移动端页面单位的选择(px em rem)绝对单位:  px相对单位:  rem  em em具有继承性  继承自直接父类  所以说在移动端很少用浏览器默认的字体大小 16px  那么 1em=16pxrem 有一个统一的标准  它继承自html   默认是16px=1rem可以给html的字体大小设置为10px    html{ font-size: 10px; }        10px=1...
移动端的布局
szydqq的博客
06-22 379
移动端的设置
移动端设计的基础尺寸单位与转化
weixin_38197294的博客
04-03 689
手机屏幕尺寸碎片化：不同手机的屏幕尺寸，分辨率，PPI，逻辑分辨率等信息都不一样，需要对不同设备尺寸单位的了解进行适配。 屏幕尺寸：屏幕大小，即屏幕对角线长度，而不是屏幕的宽度和高度，单位为英寸。 显示/物理分辨率：屏幕拥有像素的总数以及屏幕水平和垂直方向的像素数量，单位为像素。像素/px是组成屏幕图像的最小点，一个相对大小单位，同尺寸屏幕里越小越密越清晰。 屏幕像素密度（ppi）：指每英...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px ...
浅析rem和em和px vh vw和% 移动端长度单位
09-24
下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
px、em、rem、%、vw、vh单位之间的区别
01-08
字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px ...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
为什么我们需要相对长度rem em等？ 固定长度已经不能满足我们现在的需求了。 举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大小也随之缩小，这样用户体验会更好...
移动端单位换算
weixin_43627806的博客
05-07 640
px 和 em 都是长度单位 区别是 px 的值是固定的，指定是多少就是多少，计算比较容易。 em 得值不是固定的，并且 em 会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em ...
移动端计算单位 js
weixin_34253539的博客
06-26 295
移动端计算单位 js 一、http://www.jq22.com/demo/gouwuche201708281153/ (function(doc, win) { var docEl = doc.documentElement , resizeEvt = 'orientationchange'in window ? 'orientationchange' : 're...
移动端布局使用哪种单位比较好？
weixin_30914981的博客
11-15 865
关于移动端布局使用哪种单位，每个人都有自己习惯使用的单位，这个也只是我个人的一点点浅见。 欢迎大家指点。 很多人在谈到写移动端页面的时候，都觉得很恼火。因为要写n套css样式。然后用媒体查询做适配。 一般这个时候我都表示自己懵懵哒，搞不懂为什么要写这么多套。可能是由于我经验不够，所以看不出来写这么多套有什么深意。 我认为在移动端可以做到适配不同的手机分辨率，如果只是保持整体缩放，没有设计上...
移动端rem布局与传统px布局单位
Abe涛的博客
10-22 282
1
【原】移动web页面使用字体的思考
weixin_33924770的博客
03-12 292
回想2年前刚开始接触手机项目，接到PSD稿后，发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计，于是我写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，细心的产品经理发现页面的字体不是微软雅黑，要求马上修改，我就惊呆了，还跟产品争执一番。 后来了解到的手机系统 ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软...
移动端字体自适应
优雅的博客
02-28 9383
完美适口： 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑...
rpx px em rem % vh vw的区别
06-28
px是像素单位，是网页开发中最常用的单位，不具有自适应性。 em是相对于父元素字体大小的单位，适用于网页开发中的字体大小设置。 rem是相对于根元素字体大小的单位，也适用于网页开发中的字体大小设置。 %是相...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值