我在项目中使用了REM单元。我想为所有项目使用统一类型的单位。我正在和一群开发人员一起工作，我试图找到一个原因，为什么我必须在所有的CSS规则中使用REM单元，但有时我可能会发现它太多了，或者完全没有用。
我想知道以下是必要的，是好处还是坏处：
input{
border-radius: 0.5rem;
display: block;
margin: 0 0 2rem 0;
min-width: 12rem;
height: 4rem;
padding: 0 2rem;
width:
浏览 3提问于2014-06-02得票数 7
回答已采纳
虽然我的CSS可以工作，但有时没有执行特定的属性。在Chrome控制台中可以看到这一点，其中有一行通过它们，这表明它们没有被应用。我认为更具体的Div类比一般的DIV类具有更高的执行优先级。
特别是，我试图为p.note设置填充，我可以为<p.note>设置一个单独的文本大小，其大小小于p，但不能设置页边距或空白。我在我的HTML中使用：
<p class="note">
显然，<p.note>不起作用。
下面是相关的CSS片段和一些说明它没有应用的pix。我试图在<p.note>中应用的很多东西由于优先级问题而没有得到应
浏览 9提问于2022-11-20得票数 0
回答已采纳
我使用供应商的时间选择器组件。不幸的是，它的大多数大小都使用rem单位，但像素用于定位时钟元素。因此，当我试图在移动设备上使用减小小屏幕的字体大小来改进我的应用程序时： @media only screen and (max-width: 992px) {
html {
font-size: 80%;
}
} 由于选择元素从其他元素移动，小部件变得不可用。我可以用 ":host >>> ... " angular css用于定制小部件的样式，但手动重新计算和重新定位24个时钟元素并不是一项简单的任务(如果可能的话)。 是否可以强制小工具忽略
浏览 18提问于2019-03-22得票数 0
2回答
我编写了一个非常简单的Sass，用于将像素值转换为rem值(请参阅Jonathan的)。下面是代码：
// Mixin Code
$base_font_size: 10; // 10px
@mixin rem($key,$px) {
#{$key}: #{$px}px;
#{$key}: #{$px/$base_font_size}rem;
}
// Include syntax
p {
@include rem(font-size,14);
}
// Rendered CSS
p {
font-size: 14px;
font-size: 1.4rem;
}
这个混合
浏览 3提问于2011-08-03得票数 7
回答已采纳
我已经从后端获取了一些数据，需要在样式绑定中使用这些值来应用宽度。但是它不工作，我找不到正确的解决方案。下面是我的代码。 在component.html文件中 <div class="radio-group">
<label class="container poll-done" *ngFor="let item of pollQuestion?.CM_Poll_Options;let i=index;let val of percentage;"
&
浏览 20提问于2021-04-14得票数 0
我正在读关于的文章，我有点困惑。如果你使用rem，你会继续使用em还是会取代它？
例如：
.selector {
margin-bottom:24px;
margin-bottom:2.4rem;
font-size:16px;
font-size:1.6rem;
}
或
.selector {
margin-bottom:24px;
margin-bottom:2.4em;
margin-bottom:2.4rem;
}
我只是想弄清楚，是rem取代了em，还是它只是另一个单位。
浏览 1提问于2011-11-12得票数 17
回答已采纳
我正在寻找关于这些单位在图像尺寸上的使用的一些解释，但找不到任何解释。我在一些地方读到过忘记像素，只使用rem/em，但我不知道它是否也适用于图像尺寸(宽/高)。
例如，在下面的这种情况下，我应该使用哪一个？
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em
浏览 54提问于2019-05-25得票数 1
回答已采纳
1回答
在Safari中，我认为应用于阴影DOM中元素的视口单元(如vw)实际上不会响应视口的更改。他们应该这样做吗？ 在下面的演示中，浅蓝色的<main>元素和危险条纹的<div>都将其宽度设置为50vw。在Chrome、Firefox、Edge和Opera中，这些元素的大小与我放大和缩小视窗的大小相同，而在Safari中，<div>保持不变。 const shadow = document.querySelector('.shadow-root').attachShadow({ mode: 'open' });
const
浏览 28提问于2020-08-14得票数 0
我正在用html构建一个页面，页面看起来很好，在桌面上做得很好，它看起来像这样的Desktop Version 但是，当我将其全部缩小时，文本容器会被挤出，然后变得更小，如下所示 Mobile Version 困难的是，我尝试了很多方法(见下面的列表)，但似乎都不起作用！ 下面是项目的结构，完全封装在flex容器中 <div class="card" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-scale="1.15&#
浏览 17提问于2021-08-06得票数 1
我在理解代码时遇到了一些严重问题：
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size:16px;
}
p {
margin: 0 0 1em 0;
font-size: 2em;
line-height: 1em;
}
</style>
</head>
<body>
<p>Sample Text</p>
</body>
</html>
我知道现在的字体大小是32 o
浏览 1提问于2018-06-11得票数 2
回答已采纳
通过更新基础，我得到了bower_components/foundation/scss/foundation/components/_top-bar.scss:不兼容单元的错误行247：'rem‘和'px’。
浏览 1提问于2015-01-21得票数 1
5回答
考虑下面的css类定义，取自WordDress22主题：
.entry-header {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
为什么margin-bottom定义了两次，一次使用px，另一次使用rem单位？浏览器将选择哪个单元？
浏览 6提问于2013-03-31得票数 0
回答已采纳
2回答
我在我的项目中使用引导程序3，我看到引导程序中有两个字体大小的声明，如下所示：
Scaffolding.less
html { font-size:10px;}
body{ font-size : @font-base-size; }
在variables.less中，@字体基大小定义为14 in。
我一直在阅读一些资料，其中一种有响应字体大小的方法是将基本字体大小定义为body或html，然后在rem中为主体中的不同组件(如p、h1等)使用字体大小。
但是我不确定，我应该在哪里定义基本字体，它应该是html还是body？
为什么引导程序在html和body中有不同的字体大小？
My的观察:
浏览 8提问于2015-12-15得票数 4
回答已采纳
我正在尝试应用一个最大宽度到两个不同的部分，他们似乎有相同的宽度，虽然值是不同的。我已经检查了填充，但看不到会导致此问题的原因。 我已经包含了下面的代码，因为你可以看到.hero的最大宽度不同于.container，但它们的宽度仍然都是1280px。 感谢您的帮助，干杯！ <section class="section-hero">
<div class="hero">
<div class="hero-text-box">
<h1 clas
浏览 14提问于2021-09-04得票数 0
回答已采纳
1回答
我试图修改在WordPress上可用的较少的主题，其中包括修改和重新编译使用较少的内置样式表(dev/style.less)。
但是，我无法正确编译这个主题中较少的样式表。当我做"lessc /style.less“时，我会得到一个输出，其中所有的字体大小都会被弄乱。以下是提供的已编译样式表与我能够生成的样式表之间的一些差异：
538,539c521,522
< font-size: 38px;
< font-size: 3.8rem;
---
> font-size: 38pxpx;
> font-size: 3.8pxrem;
573,574
浏览 5提问于2014-05-13得票数 0
回答已采纳
1回答
我有一个子div，它是一个彩色三角形： .shape-triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
/* put on top of image */
position: absolute;
top: 20px;
left: 110px;
} 它嵌套在带有背景图像的Boo
浏览 13提问于2019-03-12得票数 0
回答已采纳
我正在建立一个响应式的应用程序，目标是台式机，平板电脑和手机使用HTML和CSS，但我不确定我应该使用的单位字体大小，字体适合任何大小的屏幕。em，px，pt和percent有什么区别？对我来说最好的选择是什么？
我希望在台式机、平板电脑和手机的响应式应用程序中听到有关它的真实体验
我将非常感谢任何人的帮助！
浏览 1提问于2012-09-05得票数 19
如何在CSS中设置始终与移动设备默认系统字体大小匹配的移动视口的字体大小(包括用户在设备系统设置中定义的自定义可访问缩放因子)？ 假设已经存在诸如@media (max-width: 600px) (为简洁而简化)之类的属性定义的移动媒体查询和诸如<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">之类的元定义。 我的期望是设置像这样的东西 p {font-size: 100%} 但这会导致不同设备上的字体大小不匹配，即，根据设备
浏览 12提问于2020-08-09得票数 0
我可以将我的<p>标签设置为特定的文本大小。但是当它被设定的时候，我想成为我的<h2>大20%。
这有可能吗？如果是的话，你们能帮我一下吗？
这就是我试过的：
h2, .h2 { font-size: @font_size + px * 25%;
提前谢谢。
阿曼多
浏览 2提问于2015-11-11得票数 3
回答已采纳
我有一个div class="myBox“和"myTitle”
.myBox的CSS
{
font-size:14px
}
.myTitle的CSS
{
font-size:18px
}
现在，在某些情况下，我希望它们都能放大或下降一个百分比。因此，我设置了一个style="font-size:150%"，并将其添加到我的HTML中。
这成功地重写了CSS类，并将150%的字体大小应用于这些类。
问题
.myBox和.myTitle现在都一样大，它们在字体大小上并没有保持相对的差异。看起来150%是关于页面的全球字体大小，所以当我告诉它到150%时，它们是一样
浏览 2提问于2017-04-17得票数 0
回答已采纳
我正在尝试理解这个工具是如何计算出clamp()函数的第二个参数的：https://fluid-typography.netlify.app/。有谁能解释一下这部分吗？ 我理解第一个和第三个参数，因为它们非常不言自明。这是第二个令人困惑的参数。 视口宽度为700px时的最小尺寸1.5rem。 视口宽度为1000px时的最大尺寸3rem。 font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
浏览 73提问于2021-10-17得票数 0
1回答
我一直在尝试创建“卡片”，当你点击它们到窗口的全部视图时，卡片就会扩展。当你在动画完成之前中断动画时，它已经变得很好了，它会导致一些图形上的小故障。我使用的是CSS转换，而不是Javascript动画(我只是使用JQuery来原型所需的类更改)，而CSS中的实现也只有这个问题。请在这里使用JSFiddle链接：，因为代码在StackOverflow上似乎不能正常工作。
$(window).on("click", ".small", function() {
me = this;
setTimeout( function() { $(me).a
浏览 2提问于2019-08-27得票数 0
回答已采纳
在试图编译Susy/Compass文档时，我得到了Undefined mixin 'if-rem'。
是这条线造成的：
我在用：
SASS 3.2.12
罗盘0.12.2
苏西1.0.9
谢谢:)
浏览 1提问于2013-11-16得票数 0
回答已采纳
2回答
Rem/Em混淆
、、、、
今天我在一个新网站上使用em‘s/rem，有几件事我想在这里讨论/问一下。
多年来，我一直是一个完全基于像素的人，在需要的时候会加入一些百分比。
我一直在读到em和rem是web应该是的“方式”。很公平，这就是我今天尝试的原因。
所以，首先要做的就是。使用em's/rem's表示尺寸的意义是否仅仅是为了改变相对于主要字体大小的东西的尺寸？
如果是这样，那么你会在什么情况下改变主要的字体大小？我一直将我的设置为16px，并使用它。
我找到了一个Sass混入，它允许我以像素为单位指定任何属性的尺寸，并使用rem和基于像素的回退来输出它。我先根据自己的喜好调整了一下。
因此，我开始使
浏览 0提问于2013-04-12得票数 3
回答已采纳
为什么在手机上查看我的页面(用WPBakery构建)时，文本字体很小，但在桌面上显示得很好？
我真的需要为每一类设备(例如桌面、平板电脑、平板电脑景观、智能手机肖像、智能手机景观)显式设置文本大小吗？
当你在手机上看到这个页面时，它看起来就像一个桌面，不管我是怎么处理这些列的。
我错过了什么？
浏览 1提问于2019-06-23得票数 1
回答已采纳
1回答
:root {
--length: 10rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
hr {
border-style: none;
border-radius: calc( var( --length ) / 5 ); /*dividing by a unitless numbe
浏览 5提问于2021-02-09得票数 1
回答已采纳
1回答
我不明白为什么在下面的页面中，从定价部分开始，IE8似乎忽略了很多垂直填充和边距：
也就是说，它忽略了定价标题上的页边距-底部，它没有对组成定价表的div应用垂直填充，而且页脚中的链接也失去了垂直填充。
为了进行比较，T可以在所有其他浏览器中运行。
提前谢谢。
浏览 1提问于2014-11-07得票数 0
我有一种将px转化为rem的混合蛋白。最近，当我尝试构建时，我收到了下面的反对意见警告。有人能提出解决办法吗。
源代码/css/partials/global.comins.scss第135行上的反对警告:在Sass的未来版本中，0px == 0的结果将是false。无单位数将不再等于单位的相同数字。
@function parseInt($n) {
@return $n / ($n * 0 + 1);
}
@mixin rem($property, $values) {
$px: ();
$rem: ();
@each $value in $values
浏览 1提问于2018-05-29得票数 0
回答已采纳
我正在用Vue构建一个第三方web组件，它的大部分样式都严重依赖于Tailwindcss。
web组件的阴影dom封装了大部分样式和css，使得(大部分)样式不会从web组件所在的网页渗漏到阴影dom的内部，反之亦然。
然而，Tailwind使用基于rem的值来调整几乎所有的字体、填充、高度、宽度等。
我刚刚发现，一个明显的例外情况是，父页面的样式会渗入到卷影dom中，因为卷影dom会将主页样式表的html{ }部分中设置的基本字体大小继承到卷影dom中。
由于rem值来自父html{}块，这意味着如果主题页面在其页面的html {}块中设置了除16px以外的任何字体大小，那么我所有基于Tai
浏览 4提问于2021-04-06得票数 0
1回答
我已经尝试创建一个仅使用vh大小的登录表单。这样做的目的是希望窗体能够根据视口进行相应的缩放。
不是的！由于某些原因，放大会在输入字段和下面的文本之间创建一个空白空间，该空白空间会随着您缩放的次数增加而变得越来越大。
这把小提琴做得不是很好，只是从我的项目中抄袭过来的。但你可以看到哪里出了问题--这才是最重要的。
有人知道我该怎么解决这个问题吗？
<span id="loginform">
<input type="text" name="login" class="LFORM" placeholder
浏览 2提问于2015-03-05得票数 7
2回答
你好。我对这三个元素如何呈现的格式有问题！样式中的html {font-size: 62.5%}减小了整个页面的字体大小。
当我禁用html {font-size: 62.5%}时，这三个元素变宽了！几乎是宽屏的！它变得太大了！我想知道为什么font-size: 62.5%;对这3个块的格式化有这么大的影响！font-size: 62.5是字体设置吗？
目前内部没有文本，但它仍然对它有影响。为什么这条线对3个块的表示如此重要。希望每个人都清楚这一点，有人可以帮助我。
浏览 1提问于2020-06-17得票数 1
我正在尝试实现一个响应性的排版解决方案与SCSS使用rems，以便使用媒体查询仅在基线字体大小的html，而不是在每个元素。
我在html中发现了不同的字体大小方法：
html { font-size: 100%; } // uses the default browser font-size
html { font-size: 62.5%; } // 62.5% = 10px to facilitate rem calculation
html { font-size: 16px; } // uses 16px
假设我会选择，那么我就可以使用轻松地分配标题和段落
@mixin fo
浏览 7提问于2015-02-19得票数 3
1回答
我想知道，默认字体大小是否适用于设备？我是说应该的对吧？
如果是适应的，为什么我们需要添加媒体查询来更改字体大小，如下所示：
html {
font-size: 100%;
@media (min-width: @screen-lg-min) {
font-size: 100%;
}
@media (max-width: @screen-md-min) {
font-size: 93%;
}
@media (max-width: @screen-sm-min) {
font-size: 87%;
浏览 6提问于2014-07-30得票数 1
2回答
我尝试过使用媒体查询，如下所示，但它甚至尝试了字体大小的%值。请注意，在媒体查询之外，我现在的字体大小为18pt，在移动视图中，我需要10pt的字体大小。我试过用谷歌搜索的可能方法。
@media only screen and (max-width: 768px) {
user-access-panel .details-panel .panel-body {
padding: 0px 0px 0px 0px !important;
width: 100.29%;
height: 130px;
浏览 16提问于2017-02-28得票数 1
回答已采纳
1回答
当我添加引导CDN链接时，字体大小会发生变化。
我发现这是因为Boostrap有一个默认的字体大小。我试图通过在外部样式表中指定字体大小并放置!import来更改字体大小，但它不起作用。只有当我将字体大小放在内联样式表中时，它才能工作。
div.banner {
font-size: 500% !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<s
浏览 6提问于2022-11-24得票数 0
2回答
我通过获取ID在DOM的正文中应用了字体大小，但是在一些子元素中没有复制font-size。
此外，我想知道如果元素中的字体大小是通过外部CSS应用的，那么这可能是一个问题？
在代码中，当用户单击保存设置时，将调用redirectToPreferences()，#ulMainMenu，#dropDownMenuItems是应应用字体大小的元素的In
如果有任何我弄错的技术概念，请详细说明
function setFontInPreference(data) {
//data will be font size in % like 100%, 120% etc
var perce
浏览 0提问于2019-05-21得票数 0
1回答
如何在缩小视口后保持两边距固定？
因此，只有图像大小减小。
在减少视口之前：
减少视口后：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Dosis', sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: minmax(480px, 33.3vw)
浏览 16提问于2021-06-06得票数 0
是否可以在Chrome媒体查询中使用rem单位？
rem单元在Chrome中运行得无懈可击，似乎在媒体查询中不受支持。这个是可能的吗？或者，这个CSS还有什么问题吗？
body { background-color: yellow; }
@media only all and (max-width: 40rem) {
body { background-color: red; }
}
@media only all and (min-width: 40rem) and (max-width: 60rem) {
body {background-color: green;}
浏览 2提问于2012-08-31得票数 4
回答已采纳
1回答
我正在整理一个新网站的排版，<small>标签出现了一个奇怪的问题--它把我的行高弄乱了。其他一切都很好(标题、标签、段落等)，但是small把它扔到了某个地方。
这是我想说的：
我的问题是，这个额外的line-height是从哪里来的，我如何纠正它？
在上有一个演示和下面的代码。
我使用的是rem单元，所以暂时不能与IE8及更低版本兼容。我用的是Firefox 19.0。
HTML
<div>
<h1>Main Heading</h1>
<p>Lorem ipsum dolor sit amet, cons
浏览 0提问于2013-03-27得票数 1
回答已采纳
3回答
移动和桌面设备上的rem？
、、、、
我注意到移动设备和桌面设备的字体大小是不同的。我用尺子测量了字母'T‘的实际尺寸，尺寸是2雷姆。在我的笔记本电脑上，大的“T”字是6毫米高，在我的平板电脑和智能手机上，“T”字是4毫米高。我还检查了多个浏览器，得到了相同的结果。
它们在所有设备上不应该是相同的高度吗？
浏览 4提问于2020-07-21得票数 0
假设我想要下列样式：
font-size: 3rem;
但是，我不想硬编码3，而是希望它是calc()操作(例如calc(2 + 1))的结果。如何指定单元rem以跟踪calc()操作的结果？我想做这样的事：
font-size: calc(2 + 1)rem;
我想我是在找连接功能吧？仅限于CSS解决方案，请。
浏览 4提问于2021-10-18得票数 0
回答已采纳
我有一个用Canva.com制作的设计，我试图把它转换成HTML文档。在Canva中，文本有不同的大小，如12、42等(我不确定它们是否是像素)。我在这里试图做的是使页面响应(这将调整文本大小时，屏幕较小)和大小的文本，而不是相对于其他元素(可能是他们的父元素)。
假设我有两个文本元素，我想相应地调整它们的大小：
文本A= 12 Canva文本大小单位文本B= 24 Canva文本大小单位
我想相应地调整文本B的大小，这样它看起来会比文本A大两倍。
如果我使用font-size: 1.2em作为文本A，font-size: 2.4em用于文本B，它会使事情看起来像我所期望的那样吗？那么，1.2
浏览 7提问于2021-12-26得票数 0
回答已采纳
正如标题所暗示的，我使用的是.NET MVC的'html.textboxfor‘剃刀命令。
由于某些原因，我的css类导致这些输入字段与它们原始的静态对应字段极不相称。
下面的屏幕截图只有标题部分和输入框，似乎大小正确：
但是，一旦我使价格部分可编辑，就会发生这种情况：
这是我用来生成html的HTML表(位于循环中)：
<table width="1%">
<tr>
<td colspan="2">
@Html.TextBoxFor(m => m.Title[outer],
浏览 19提问于2017-08-30得票数 0
回答已采纳
1回答
我有一些Header <header>
<div>
<Link to="/" class="navbar-brand">Home</Link>
<Link to="/test" class="navbar-brand">Test</Link>
<Link to="/test2" class="navbar-brand">Test2</L
浏览 20提问于2020-12-09得票数 0
回答已采纳
#sign-up-cta .striking {
font-family: "Rubik", sans-serif;
padding-bottom: .75rem;
} 如果我们为padding或margin使用rem，它从哪里获取默认值？如果我们声明了padding: 0和margin: 0，那么它从哪里获取值呢？ 上面的.75rem示例用于文本的位置。如果我们不声明padding或margin，.75rem会是什么
浏览 36提问于2021-09-20得票数 0
我知道rem单元是一个相对的单元，用于从根元素即html导出字体大小。
我的问题是-基于长度的css属性(如宽度、高度、填充、边距(如果在rem中指定)如何用于从html元素派生的任何元素。
例如：
<html class="basicStyle">
<body>
<div id="view">This is some content</div>
</body>
</html>
风格：
.basicStyle{width:500px; font-size:20px}
#view{width
浏览 4提问于2015-09-10得票数 1
回答已采纳
2回答
我不完全明白如何确定区域，em，px或%。
我知道每一个都意味着什么，但我仍然不清楚什么时候该使用每一个。知道使用哪种标准有什么标准？
非常感谢您的投入。
浏览 8提问于2022-02-05得票数 -2
回答已采纳
在chrome浏览器中，我在chrome的设置选项下从外观更改字体大小。它不会改变我的react页面。 ?
浏览 18提问于2021-07-06得票数 0
我正在定制video.js，并在LoadProgressBar中添加了一个子元素来显示注释。相应的输出HTML如下： <div class="vjs-progress-control vjs-control">
<div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.00" aria-valuemin="0"
浏览 74提问于2020-12-23得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
