px rpx em rem的区别在响应式布局中该怎么用
大家肯定听过px、rpx、em和rem这些单位，但它们到底有什么区别呢？咱们先来聊聊这些单位的特点和应用场景吧！
-
px（像素）就是基于屏幕分辨率的绝对单位。例如，在iPhone 6上，屏宽是375px，但实际物理像素是750个，所以px是针对屏幕显示质量来定的，这意味着它有点死板，对响应式来说不太友好。
-
rpx（responsive pixel）是微信小程序特有的单位，屏幕宽度被定义为20rem或者750rpx，这样可以根据屏幕尺寸自动做缩放，特别适合移动端。简单说，rpx更加灵活，方便开发多尺寸屏幕的适配。
-
em是相对单位，指的是当前元素字体大小的倍数，它会继承父元素的字体尺寸，所以会随父级字体变动而变化，特别适合做响应式字体大小调整。要知道，浏览器默认的字体大小通常是16px哦。
-
rem则是相对于根元素（html）的字体大小，这意味着无论你在多深的嵌套层级，都能保证字体大小跟根元素保持一致，超适合统一管理字体大小。
总结一下，如果你想让布局灵活又好控制，尤其是在响应式设计里，最好用em或rem来设置字体大小，而px只适合用在固定尺寸的场景，不然有点“死脑筋”哦。
css里面display属性是换行吗 为什么css2.0定位和布局很重要
说说display属性吧，很多小伙伴一听说display:block就想“哦，它不是让元素换行吗？”哎，这有点小误区哦。
-
display属性的作用其实是告诉浏览器这个元素要生成什么类型的显示盒子，常见的类型有
block（块级元素）、inline（行内元素）、inline-block等等。 -
当你设置
display:block时，这个元素会占据一整行，也就是说上下会自动换行，它的宽度默认撑满父容器，这跟它“换行”的表现一样，但本质是它变成了块级盒子。 -
这可是css排版的大法宝！把元素变成块级的，可以利用各种定位（静态、相对、绝对、固定）和布局属性来安排页面结构，非常灵活。
-
顺便说说
position属性吧，它可以让你用left、right、top、bottom来偏移元素位置。定位元素后，它不会影响正常文档流哦；就是说，它像是在“空中飘着”一样，你在赋值上下动一动，但旁边的元素不会理会。 -
好了，总结下，
display:block并不仅是“换行”，更是让元素变身全新的布局盒子，结合好定位属性，你的页面布局简直嗷嗷叫酷！
相关问题解答
- px和rpx到底有什么区别？
噢，朋友，px是标准的像素单位，代表你的屏幕上的一个点，比较死板，适合固定尺寸；而rpx是微信小程序的魔法单位，根据屏幕宽度自动缩放，特别适合各种手机屏幕，超方便！你要是做微信小程序，rpx简直是必备神器，省心又省力！
- 为什么要用em或rem设置字体，而不用px？
太棒的问题啦！em会根据父元素字体大小灵活变，rem则固定相对于根元素字体，二者都超适合响应式设计，能够让字体在不同设备上自动适配。用px你就会发现字体可能太大或者太小，不好调控，em和rem则能帮你实现灵活又舒适的视觉效果，真心推荐！
- display:block就是换行吗？
事实上呢，display:block确实会让元素换行，因为它占满一整行，但本质上它是给元素设定一个块级显示盒，就像给元素穿了一个“块状衣服”，方便它占据独立空间。如果想让元素并排，去掉换行，就得用inline或者inline-block啦，超级重要的CSS小知识嘿嘿~
- 定位属性position如何影响布局？
好耶，位置大揭秘来了！position让你灵活控制元素位置，relative位置相对于正常流但可偏移，absolute让元素脱离文档流，可以精准定位，fixed则把元素固定屏幕位置，滚动都不动。超酷吧？这玩意儿配合display属性用，简直让你的网页布局变魔法，嗖嗖嗖搞定！
本文来自作者[杜华]投稿，不代表优顿儿知识库立场，如若转载，请注明出处：https://www.udonr.com/jsss/202512-iIVz3pVbvfH.html
评论列表（3条）
我是优顿儿知识库的签约作者“杜华”
本文概览：px rpx em rem的区别在响应式布局中该怎么用 大家肯定听过px、rpx、em和rem这些单位，但它们到底有什么区别呢？咱们先来聊聊这些单位的特点和应用场景吧！ p...
文章不错《px rpx em rem的区别与用法 CSS中的显示属性该怎么理解》内容很有帮助