个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试设置我的根 font-size 以在 calc() 中使用 vmin 和 px > 功能。当使用 rem 设置圆 div 的 height 和 width 时，所述圆在小尺寸时被“压扁”(见下面的照片和链接)。检查 div 时，报告计算出的宽度和高度相等，尽管它的外观“被压扁”。
html {
font-size: calc(10vmin + 1px);
}
.circle {
height: 1rem;
width: 1rem;
background-color: blue;
border-radius: 50%;
}<html>
<div class="circle"></div>
</html>当 height 和 width 更改为 px 值时，问题已解决。此外，将根字体大小更改为不使用 vmin、vh 或 vw 来计算大小似乎也可以解决问题。
正如 Aditya Sarin 指出的那样，使用 vh 或 vw 更改 div 的大小也修复了错误。似乎重现此错误的唯一方法是将 calc() 与视口(viewport)单位和 px 值一起使用。
为什么将 calc() 与视口(viewport)单元一起使用似乎会导致此错误？将视口(viewport)单位与 px 值混合以创建响应式 rem 大小通常被认为是不明智的吗？
最佳答案
我不确定这是否是一种错觉，但在尝试了问题中给出的 border-radius 方法和 background-image radial-gradient (结果更差)后，我认为使用实心圆 Unicode 字符会更好结果。
所选择的字体是否会改变事物需要试验，抗锯齿设置是否会产生影响也是如此。这是一个带有 border-radius 和 character 方法的片段，因此可以比较它们。一个字符可能会给出更好的结果，因为字体设计师会了解如何尽可能地平滑事物。尝试使用更大的 Unicode 填充圆圈并缩小它也可能是值得的。
html {
font-size: calc(10vmin + 1px);
}
.circle {
height: 1rem;
width: 1rem;
background-color: blue;
border-radius: 50%;
}<html>
<div class="circle"></div>
<div style="color:blue; font-size: 2.4rem;">●</div>
</html>关于html - 用 rem 和 vmin 设置的圆尺寸在小尺寸时被压扁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66272286/
26
4
0
在 VS 代码中，当我使用 Ctrl+/ 切换注释时，它会用 @REM 注释该行。我如何更改它以仅使用 REM 注释该行？ 最佳答案 看看这个扩展，Custom Language Properties
我有以下 HTML 代码: Hello World 我正在设计它的样式: h1 {font-size:100pt} 如何将此 100pt 转换为 EM 和 REM？ 最佳答案 在 CSS 中， - p
我一直在为这个问题绞尽脑汁，谷歌搜索并没有真正提供太多帮助，甚至没有关于这个问题的文档，但它极大地影响了我目前向移动友好型设计的转变。 无论我走到哪里，每个人都在吹捧使用基于 rem 的布局作为新的黄
我有以下内容: 我希望我的输入框最多包含 4 个字符。如果我使用 rem 单位，在确定宽度时是否应该使用一些公式？ 最佳答案 除非您使用等宽字体，否则您无法真正知道它应该有多宽。 这是来自 CSS
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 7年前关闭。 Improve t
我正在为所有类型的元素使用 rems，例如: html: 62.5%; .element { font-size: 1.6rem; margin: 2rem 0 1rem 0; pa
我在移动设备上遇到响应式设计问题，请查看代码和图片。这两者之间的区别是 html 根元素的字体大小，我将一个设置为百分比，另一个设置为 px，但是设置百分比的设置不正确，而设置 px 的设置正常。图片
我正在尝试使用 rem 来尊重用户对字体大小的设置: 我首先在我的 css 文件中添加了以下内容: html { font-size: 62.5%; } 然后我将 font-size 作为 rem 添
我为一个网站编写了一个组件，该组件呈现一些 HTML，并使用 CSS 设置此 HTML 的样式。到目前为止，一切都很好。现在我们有以下约束: 该网站为 body 设置了 14px 的 font-siz
我正在使用 CSS 断点 来更新我网站上的字体大小。 常规文本会按预期响应，但受使用 rem 值的类影响的文本不会。 谁知道为什么？ (在整页中尝试该片段并调整浏览器大小) body { font-s
我正在尝试使用 rem 命令在包含多个命令的命令行中添加注释。下面是一些例子来说明我的意思: echo Hello & rem.Comment & echo world! (echo Hello &
在 Mac Mojave 10.14.2 上的 Safari 12.0.2 和 Chrome 71.0.3578.98 中，当使用 rem 单位设置 font-size 时，实际大小不会低于 9px。
如何将 PX 转换为适合我的类型的 REM？我读过 Jonathan Snook 关于使用 REM 的文章，但他使用的是 font-size:62.5%，默认字体大小为 10px(为了更容易计算)。如
我今天一直在尝试在一个新站点上使用 em/rem，并且有几件事我想在这里讨论/询问。 多年来，我一直是一个完全基于像素的人，在需要时会投入一些百分比。 我一直在读到 em 和 rem 是网络应有的“方
我注意到 REM 单位可用于元素的大小，而不仅仅是字体大小。并且对 HTML 字体大小属性非常有用。 html { font-size:1vw } @media all and (max-width:
我必须将一些 sass 移植到 css 并且我有数千个 rem-calc 声明。 所以我需要例如 rem-calc(10 15 20 15); 为 10px 15px 20px 15px; 从 /re
我意识到 Bootstrap 将使用 v4 切换到 rem。但是，我使用的是当前版本 (v3)，我想使用 rem。 原因？我希望网站上有可以为最终用户缩放字体大小的按钮。我相信最好的实现方式是使用 r
我正在创建自己的入门框架。 Link here 首先，请原谅庞大的 CDN 插件列表。现在我只是在为常用脚本编写一些自定义 css 覆盖，以便它们更容易为不同的元素设置样式。 我遇到的问题是在 ie
它应该很简单，但无论出于何种原因，rem 都不适合我。 比如我有 I will make sure you get upvoted, if you answe
正文的字体大小为18px。 我的标题都声明为 rem 值。我希望 margin-bottom 与每个标题的 line-height 一样大，而 margin-top 是每个标题 line-height
我是一名优秀的程序员,十分优秀！