我应该在CSS中使用px或rem值单位吗？

在CSS中，px和rem是两种常用的值单位，它们在不同方面有各自的优势。

px（像素）是一种绝对长度单位，它表示的是屏幕上的一个点。使用px作为单位可以让元素的大小固定不变，方便控制精确的尺寸。但是，px在不同设备上可能会导致元素大小不一致，不利于响应式设计。

rem（根相对单位）是一种相对长度单位，它基于根元素（通常是<html>元素）的字体大小进行计算。使用rem可以让元素的大小相对于根元素的字体大小进行缩放，方便实现响应式设计。但是，rem在实际使用中需要注意设置根元素的字体大小，否则可能会导致元素大小不符合预期。

总的来说，选择使用px还是rem取决于具体的需求和场景。如果需要精确控制元素的大小，可以使用px；如果需要实现响应式设计，可以使用rem。在实际开发中，可以根据需要灵活运用这两种单位。

相关·内容

CSS基础-属性值单位：px, em, rem, %

在CSS中，尺寸单位是决定元素大小的关键。正确选择和应用单位不仅关乎布局的美观，还直接影响到网站的响应式设计和可访问性。...像素（px）概述像素是最基本也是最直观的长度单位，它代表屏幕上的一个物理像素点。在早期Web设计中，px是使用最为广泛的单位，因为它提供了稳定的显示效果。...避免：尽量在靠近根元素的地方设置em值，减少嵌套层数，或者使用rem单位替代。...常见问题与避免问题：忽略设置根元素的字体大小，导致rem单位失去意义。避免：始终在CSS初始化中明确设置html的字体大小，以便于控制整个页面的缩放比例。...对于复杂布局，考虑结合使用flexbox或grid布局。 /* 示例：使宽度占据父元素的50% */ .box { width: 50%; } 总结选择合适的单位是CSS布局设计的重要一环。

5831 0

5个需要避免的CSS错误

正如我们今天所知，CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。它简单、强大，而且是声明式的。我们可以很容易地实现复杂的事情，如暗黑/光明模式。...CSS Code Smells Code Smell中文译名一般为“代码异味”，或“代码味道”，它是提示代码中某个地方存在错误的一个暗示，开发人员可以通过这种smell（异味）在代码中追捕到问题。...使用 px 单位像素的使用相当频繁，因为它起初看起来很容易和直观的使用。事实恰恰相反。很久以来，像素已经不再基于硬件了。它们只是基于一个光学参考单元。 px是一个绝对单位。这意味着什么呢？...*/ max-width: 20ch; } 通常情况下，px最常用的替换单位是rem和em。它们以一种从框到文本的相对方式来表示字体的相对大小。...总结我们已经看到了如何改进我们的CSS代码。遵循一些简单的指导原则，我们可以实现一个声明式、可重用和可读的代码库。我们应该在CSS中投入和在Javascript中一样多的精力。

4491 0

为什么你永远不应该在CSS中使用px来设置字体大小

这意味着，如果我wu7的样式表使用像素单位，可能导致访问网站的用户难以阅读。因此，作者建议使用相对单位，如em、rem或百分比，而不是像素。...案例证明：在CSS中， px ， em 或 rem 单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解，因此我想在这里发帖来解决这个问题。我们要非常清楚：在CSS中使用的单位绝对很重要。...即便如此，我仍建议使用 clamp() 或媒体查询来设置最小和最大值，因为屏幕尺寸往往远远超出我们所期望或测试的范围。...因为边框宽度和边距都是在 px 中设置的，它们保持不变，不会缩放。但是请注意，如果将CSS中的 px 更改为相应的 rem 值，会发现线条和间距确实变大了！...我们应该永远不使用 px 吗？虽然我认为如果你选择这条路，你可能会没事，但我仍然认为 px 有其存在的意义。

1.8K2 0

rem与em详解

如果你使用值 1em 或 1rem，它可以被浏览器翻译成从16px到 160px 或其他任意值。...然后我会讲到为什么你应该使用 em 或 rem 的单位。最后，我们会看看到底哪些典型元素的设计，你应该在实际应用中使用哪种类型的单位。...相反，它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。...我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。...但是基于 rem 的断点他们将响应不同的字体大小。不要使用 em 或 rem : 多列布局布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。

4.7K3 0

深入学习下 CSS 间距相关的知识

因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。现在，让我们开始吧。间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...在 CSS 中，可以按如下方式设置间距： .element { padding: 1rem; margin-bottom: 1rem; } 我为内部间距使用了padding，为外部使用了margin...你能猜出在 CSS 中应该如何设置间距吗？好吧，让我为你添加一个骨架模型。...使用 CSS 网格，你可以使用 grid-gap 轻松添加间距。此外，你不需要关心网格项目的宽度或底部边距。 CSS Grid 为你做一切！...间隔组件的挑战现在你已经了解了间隔组件的概念，让我们深入了解使用它们时的一些预期挑战。以下是我想到的一些问题：间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？

13.5K4 0

web前端开发时推荐用rem做单位

我之前做页面写css样式的时候一直用的 px 做单位，因为直接看着PC端的设计图标注多少像素就写多少像素。...下面我说下我对 rem 的看法，和我怎样使用 rem ，为什么推荐使用 rem 一、rem 单位 rem 是一个相对单位，相对根元素标签字体大小的单位，一般浏览器默认的是 1rem =...是不是一下得出结果了可能有人就想（我之前是这样想过），直接用px做单位，不香吗？还换算成rem，不是多此一举吗？...下面我就谈谈我从 px 到 rem 遇到的神奇的事，改变了我的想法三、为什么推荐使用 rem 做单位我推荐用rem做单位，还得从一张总宽是 1920px ，内容宽度是 1440px 的设计图说起...但是我们将 px 换算成 rem 的时候，还是将以 50px 为准（除以 100 再乘 2 ）。如果用的rem做单位，只要控制好媒体查询，就会整体的同比例缩小或放大。

1.5K4 0

现代 CSS 解决方案：CSS 四舍五入数值单位

此功能可能无法在较旧的设备或浏览器中使用。 CSS round() 函数根据选定的舍入策略返回舍入数。...作者应使用自定义 CSS 属性（例如 --my-property）作为舍入值、间隔或两者兼而有之；如果这些函数具有已知值，使用 round() 函数显然不太必要。...好好好，那就再回想一下在此之前我们开发中遇到的痛点吧：解决基于 transform 的模糊问题使用 round() 模拟步骤缓动动画解决百分比或者 rem 单位的四舍五入问题前两点可以看 ChokCoco...而我遇到的主要问题就是第三点，也就是由于浏览器渲染机制，导致有时百分比或者 rem 的单位实际计算值为小数的情况引起的系列问题。...好了，问题就这样愉快地解决了……吗？好吧，并没有。—T_T— 4 兼容性开头说了这是一个比较新的 CSS 函数，所以兼容性肯定是个问题。

1021 0

聊一聊CSS中的长度单位

使用场景那么这些属性和单位怎么配合使用呢？特定的属性需要使用特定的单位吗？...其实并非如此，单位和属性无关，同一个属性任何单位都适用，何时使用何种单位是没有限制的，如果属性接受以px为单位的值（比如：margin: 5px），那么它也可以接受英寸或厘米（margin: 1.2in...绝对单位绝对单位（px，cm， mm，in，Q，pt和pc）意味着以此为单位的长度值与其代表的物理长度相等，比如width: 1cm即与现实世界中的1cm长度相等，也意味着绝对单位在所有的媒介上的显示效果是一致的...rem CSS在2013年创造出了一个新的单位rem，rem表示的是根元素（html元素的）字体大小，在每个元素里面em都可能不一样，但是rem都是一致的。...因为这一特性，rem现在被更广泛的应用于响应式设计。 ch ch用的表较少，是CSS3中新加入的单位，表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。

1.1K7 0

Rem布局的原理解析

什么是Rem rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。...em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 我在面试时经常问会一道和em有关的题，来看一下面试者对css细节的了解程度，如下，问s1...p {width: 50x} /* 屏幕宽度的50% */ 如果想要页面元素随着屏幕宽度等比变化，我们需要上面的x单位，不幸的是css中并没有这样的单位，幸运的是在css中有rem，通过rem这个桥梁，.../ 100 + 'px'; 那么如何把UE图中的获取的像素单位的值，转换为已rem为单位的值呢？...我认为一般内容型的网站，都不太适合使用rem，因为大屏用户可以自己选择是要更大字体，还是要更多内容，一旦使用了rem，就剥夺了用户的自由，比如百度知道，百度经验都没有使用rem布局；一些偏向app类的，

1.2K2 0

再看CSS长度单位使用，做到胸有成竹

前言在日常的开发过程中，对长度单位的使用较为混乱。本瓜称之为“黑盒长度单位使用”。涉及到网站需同时兼容 PC 和移动端情况更甚：px、百分比、em、rem、vw etc....相对于父元素你真的了解 px 吗自然界标准长度单位每天基本上都和 px 打交道。...css像素（css pixels）：css像素是指网页布局和样式定义所使用的像素，也就是说，css代码中的px，对应的就是css像素。...css换算和这个基准值有关；页面动态font-size值 = 屏幕宽度 / 设计稿 rem 宽度注：这里要考虑 dpr 这个变量，要先除掉。...劣：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。

2161 0

rem适配移动端的原理及应用场景

要去理解rem/em/vm/vh等，首先要直观的去理解他们到底是什么？理解好了，后面就好办了。其实这几个都是css单位，就像我们常用的px一样，只不过他们都是相对单位。...我平时使用的百分比单位如：width:100%;就是相对单位。...对，css不是有相对单位rem么？我们全可以实现借助rem代替上面的a。...所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。...给元素添加font-size属性，并且动态改写font-size的值六、em可以用来做弹性布局吗？

1.7K2 0

手机响应式网站设计_如何做响应式网页设计

不管在哪个地方单位换算的规则都是不会变的。如何跟设计图对接设计图上的单位是px，我们如何转换成em呢，难道用计算器吗？...这时候我们根据这个表来设置基础像素，比如设计图的宽度是640px，我们看它这个表，可以看到html对应的font-size值是17.77778px，那么基础像素就是这个值，然后我们根据设计图量出来的px...长度转换成em、rem单位了！...我们配合CSS预编译来做呢，less、sass、stylus，不是可以让css有运算能力吗。之后我发现了百度EFE团队开发的基于less的est框架里面就包含了这功能。...我最先尝试使用sass来写的。它是基于ruby环境的，这个我就不计较了，反正安装方式跟node一样简单，安装子。后来发现它竟然不支持正则，还能不能好好玩耍了？最后就用了先进的stylus。

1.3K1 0

细说移动端经典的REM布局与新秀VW布局

静态布局直接使用px作为单位 2. 流式布局宽度使用%百分比，高度使用px作为单位 3. 自适应布局创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。...CSS像素 CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。...那开发的时候在CSS中要设置什么尺寸呢，如何做到一份设计稿适配到不同机型中最佳方案是：在photoshop或其他工具中量出某个元素或图片或文字的尺寸，然后直接写到代码中。额外的适配不需要理会。...我们可以选择使用px直接定义 /* 设置字体大小，不使用rem单位，根据dpr值分段调整 */ @mixin font-size($fontSize) { font-size: $fontSize...通过配置html根元素的font-size为vw单位，并且配置最大最小的像素px值，在其他css代码中可以直接使用rem作为单位调用方式炒鸡简单 html { @include root-font-size

12.1K4 2

论CSS中可使用的font-size的长度单位

下面的CSS是把容器 div的 font-size设置为 rem单位值。其他部分的元素依然是使用 em作为 font-size的单位。...例如，你可以调整一个元素的 font-size为3rem，使其值为30px，或者4.2rem也就是42px，等等。...其他绝对值单位 CSS也允许其他很多绝对值单位，这些单位在屏幕排版的情况下使用较少，更多是用在传统的打印介质中。你可以使用pt或者pc设置打印的字体大小版式。...即便在IE9或者IE10的版本里，使用rem给缩写的 font属性设置字体大小时，都可能使赋值失败。这两个浏览器也不支持给伪元素使用rem单位。本文讨论的所有单位中，视窗单位的浏览器支持是最少的。...在相对单位里，你应该在模块当中使用em设置字体大小，给独立模块使用rem单位，例如给一个模块的根元素使用rem。你也可以结合使用视窗单位和其他单位，来保证你的排版会随着视窗宽高变化而自动适应。

2.4K2 0

终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

我同意Bramus在他的文章中对这个话题的看法。他建议使用类似这样的meta标签：使用CSS比较函数时，需要注意在 env() 中使用无单位的数字作为回退值会导致在Safari中出现错误。我们必须添加单位 rem 。...我心里想，为什么不把CSS比较函数和虚拟键盘的值混合在一起呢？我试了一下，结果还真行。请查看下面的视频：这是怎么运作的？...min(1rem, 0) 。底部的值将是 1rem 或键盘的高度。...最后， border-radius 可以是 50px 或者 0 。不错，对吧？我从来没想到能做出这样的演示。你觉得它有用吗？我很期待看到你会做出什么。

3702 0

CSS单位总结

CSS 中的哪些单位首先，在 CSS 中，单位分为两大类，绝对长度单位和相对长度单位。绝对长度单位我们先来说这个，绝对长度单位最好理解，和我们现实生活中是一样的。...常见的绝对单位长度如下：这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个经常使用的值，估计就是 px(像素)。...相对长度单位相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，我们可以使文本或其他元素的大小与页面上的其他内容相对应。...接下来来看一下 em 和 rem。em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。...: 10rem; height: 10rem; outline: solid 1px blue; display: block;}所以当用 rem 做响应式时，直接在媒体中改变 html 的 font-size

771 0

探讨移动端适配

1px 的等于物理像素1px的那么他们的比值就是1：1 此时是显示正常，如果我们将浏览器窗口放大两倍，CSS的像素还与物理像素一一对应吗？...答案是否定的，我们在css中只给盒子规定了100x100的像素，而在浏览器放大两倍后盒子变成了200x200 从这里也验证了css中的像素只是一个相对单位，浏览器在对html解析时会将css像素转换为物理像素在进行呈现...以Iphone6为例他的高宽为 750x1334 也就意味着横向只能展示 750个像素点，如果此时有一个900px的盒子，在Iphone6中会正常显示吗借助调试工具查看 .box1{...比如页面元素字体标注的大小是32px，转换为vw为 32/750（设计稿）*100vw 对于需要等比缩放的元素，CSS使用转换后的单位对于不需要缩放的元素，比如边框阴影，使用固定单位 vw示例如下...1.给body规定最大与最小宽度 2.使用媒体查询限制html字体大小的值另一种实现方式这里我在网上找到了另一种办法，可以解决上述方法的尴尬处境，而且可以规定body宽度的区间，不至于被无限拉伸

1.4K1 0

超越媒体查询：使用更新的特性进行响应式设计

注意，我们仍以这种方式使用媒体查询，但是元素本身驱动了响应行为，而不是在CSS中定义了断点 ?。...between 16px and 22px */ } min()接受两个值，它们可以是相对，百分比或固定单位。...使用响应单位你是否曾经建立过一个带有大标题或副标题的页面，并且在 PC 屏幕上的显示效果良好，但在移动设备上却发现它太大了？我猜肯定会遇到这种情况，在本节中，我们将介绍如何处理此类问题。...在CSS中，你可以使用各种度量单位来确定元素的大小或长度，最常用的度量单位包括：px，em，rem，％，vw`和vh。虽然，还有一些不常用的单位。...大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。相对单位相对单位（例如%，em和rem）更适合于响应式设计，这主要是因为它们具有跨不同屏幕尺寸缩放的能力。

4.1K1 0

移动web开发之rem适配布局

Less变量 Less编译 Less嵌套 Less运算 3.4 Less变量变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。...所以，我们需要把我们的less文件，编译生成css文件，这样我i们的html页面才能使用。...，运算结果的值取第一个值得的单位如果两个值之间只有一个值有单位，则运算结果就取该单位 4.rem适配方案让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。...使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。...为单位的值； 4.2 rem适配方案技术使用（市场主流）技术方案一 less 媒体查询 rem 技术方案二（推荐） flexible.js rem 总结：两种方案现在都存在

1.9K2 0

Web 技术：CSS最小和最大(宽度高度)知识点及优缺点

在使用阿拉伯语等多语言网站时，这一点非常重要。考虑以下来自Twitter的示例： ? 在以前的情况下，按钮上带有单词“تم”，表示完成。按钮的宽度太小，因此在后面的案例中，我增加了它的最小宽度。...结果min-height值被设置为与内容一样长。考虑以下示例： ? 用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目，所以它的min-height与它的内容相等。...想法是为高度添加一个较大的值，例如max-height：20rem，可能无法达到，然后我们可以使用动画从max-height: 0变换到max-height: 20rem。...max-width: 600px; } 对于我来说，我更喜欢第二个思路，因为我只需要定义max-width: 600px。...最大宽度/高度和视口单位的流体比率为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。 ?

6.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云