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

淡颜Amo~

已于 2022-06-22 17:45:00 修改

阅读量2k

点赞数 1

文章标签： css

于 2022-06-22 16:26:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44718039/article/details/125411959

版权

本文深入探讨了CSS布局中常用的几种单位，包括绝对单位px，相对单位%、vh、vw，以及基于字体大小的em和rem。了解这些单位的用法和特性，有助于提升网页和移动端应用的响应式设计能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

px：绝对单位

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

淡颜Amo~

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css移动端页面单位,移动端web开发PX单位问题

weixin_42412396的博客

08-04

1057

在页面开发过程中，对于设计给的设计稿，一般的PC页面开发的时候，很简单，使用px为单位，给多少px就标注多少。但是到了移动端的web开发，一般标注的单位是dp，这对于css里面px单位就需要转换一下了，这边简单说明一下相关点。几个概念设备像素设备像素，也叫物理像素，先来看看很多资料上面的描述它是物理概念，指的是设备中使用的物理像素(Physic pixel)。这个单位用px表示，它是一个[相对绝对...

移动端常用单位——rem

09-16

752

移动端常用单位： ①px：像素大小，固定值 ②%：百分比 ③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位） ④rem（移动端主流）：相对根节点(html)的font大小 ⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一 ⑥vh（视口高度）：相对视口高度比例，1vh相当于...

参与评论您还未登录，请先登录后发表或查看评论

移动端常用单位

qq_45178972的博客

04-05

418

em：自身元素font-size的n倍，如果自身元素没有设置font-size，就从父元素继承过来 pc端的font-size最小是12px,但移动端就不是了 em常用于text-indent:2em; 段落缩进，因为2em就表示2个字体大小 2，主流：rem 375px -> 1rem = 20px height = 50(50是某个div的高度) / 20 = 2.5rem 750px -> 1rem = 40px height = 100 / 40 = 2.5rem ?(视口宽度) -.

移动端单位解析

weixin_34038293的博客

03-04

136

手机端开发单位到底用什么？目前有3种，px，em ，rem PC端大部份是用px单位，小部分用em单位，而移动端，请全部用rem单位吧。目前大部份设备，包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的。 rem是什么？相对长度单位，相对于根元素（即html元素）font-size计算值的倍数。 rem用法很简单，就是根...

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

11-21

本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...

浅析rem和em和px vh vw和% 移动端长度单位

09-24

移动端开发中的长度单位主要有以下几种：px、em、rem、vh、vw和%。它们各自的特点和用途不同，在移动端开发中扮演着重要的角色。首先来聊聊em单位。em是一个相对单位，它指的是当前字体的字号大小。浏览器默认字体...

前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应

m0_51244077的博客

01-09

1442

前端中常用的单位度量+图片自适应

px、em、rem、%、vw、vh单位之间的区别

01-08

本文将详细介绍px、em、rem、%、vw和vh这六个单位的区别及其应用场景。 1. **px (像素)**：像素是绝对长度单位，代表显示器上的最小物理点。1px始终表示相同大小的点，不会随浏览器窗口或用户设置变化。它适用于...

移动端开发, 常用CSS单位

weixin_34405557的博客

12-25

421

(转)https://www.cnblogs.com/mylove103104/archive/2015/06/18/4584779.html rem "em" 单位是我们开发中比较常用到的，它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小；“rem” 中的 “r” 代表 “root”，它表示以根（即“html”）元素的单位大小为基准来设置当前元素的单位大小，所以不管当前元素是任意子...

CSS移动端的单位

qq_23379977的博客

12-19

756

一、定位绝对定位相对于谁（相对于离他最近的已经定位的父级元素）二、兼容 1、相对于IE6、7的BFC是那种方法（zoom：1） 2、居中要优先考虑padding，因为lin-height有一些兼容 3、对于隐藏的认识（visibility：hidden 是隐藏并且占位置；display：none 是隐藏不占位置） 4、display：tabl

移动端适配和响应式页面中的常用单位

Keep trying, keep going

06-10

878

百分比单位是相对于父元素的大小计算的。它可以用于设置宽度、高度、字体大小等属性，使得元素能够随着父元素的大小自动调整。单位也可以用于移动端适配和响应式页面，但由于它是相对于当前元素的字体大小计算的，这可能导致嵌套元素的大小计算变得复杂。这样，当我们需要调整整个页面的大小时，只需修改根元素的字体大小即可。）的字体大小计算的。在实际项目中，我们通常会根据不同的需求和场景，灵活地使用这些单位来实现移动端适配和响应式页面。视口单位在移动端适配和响应式页面中非常实用，因为它们能够使元素随着视口大小自动调整。

移动端尺寸单位的区别：px、em和rem

weixin_33901641的博客

08-24

499

px是固定像素，无法适应流布局，一般高度以px设置，web app版宽度以使用rem。 em是指相对于父元素的字体大小的单位；因为它是相对于父元素的字体大小的单位，那如果你要设置一个元素的宽度，高度，那么就得去看他父级的大小，如果父级也是em单位，你又得去找他的父级，得一层层计算，才能得到准确的像素值。 rem的出现使很多 移动端的自适应得到了改变，因为 rem是指相对于根元素的字体大小的...

移动端布局的单位

weixin_43755513的博客

08-03

1128

1.px:是固定大小单位。 2.em：根据父元素的font-size值进行计算 3.rem：根据根元素的font-size值进行计算 4.em和rem的font-size值若低于12px,浏览器会按照12px 去解析。 5.vw:视窗宽度的百分比。 6.vh：视窗高度的百分比。 7.vw和vh会随着宽高的变化而发生改变如果html的font-size会发生改变，那么rem的值也会随着变化而变化，...

移动端布局单位

cicistream

10-06

1783

移动端设备种类繁多，需要适配多种情况的响应式布局来保证美观的页面实现，先来解释容易弄混的多个名词。 PPI 单位英寸像素数DPR 设备像素比：设备像素 / CSS像素(某一方向上)DPI Dpi（每平方英寸像素数目）：图像细节程度的度量建议看一下知识小科普！像素英寸与DPI的那些事儿单位：　　 - em em是相对长度单位。相对于当前对象内文本的font-size(即父元素

移动端字体单位该使用px还是rem?

weixin_30819163的博客

08-15

219

对于只需要适配少部分手机设备，分辨率对页面影响不大的，使用px即可，对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。 rem配置参考，适合视觉稿宽度为640px的： <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalab...

一次搞清楚移动端适配这几个坑爹的单位慨念

weixin_34290096的博客

03-05

269

一次搞清楚移动端这几个坑爹的单位慨念目录: 一、让坑爹的单位,不再坑爹二、需要准备什么样的设计稿三、rem方案的原理和细节高清屏上,位图的处理高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理一、让坑爹的单位,不再坑爹 移动端适配本身不难,但是因为涉及到单位转换,想要...

rem和em和px vh vw和% 移动端长度单位