屏幕HTML元素大小

发布于 2025-01-31 08:41:24 字数 190 浏览 2 评论 0原文

我从设计师那里获得了XD.Adobe链接以将其实现为网页，因此我采用的是Adobe中存在的相同的PX尺寸，并将它们放到我的网页HTML元素上，但是我注意到的是HTML元素看起来更缩放。 - 在较大的屏幕中，因此，如果屏幕在XD中匹配屏幕大小。Adobe。网页将相同，否则会更大，我读到的解决方案之一是停止使用PX并开始使用％，但不会是适用，因为该项目将在几天后完成。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

闻呓 2025-02-07 08:41:24

如果您试图将 px 转换为任何其他尺寸单元，我建议您使用 rem 单元进行。基本上 rem 单位相对于HTML根标签的大小。
为了进一步了解，我建议您通过此网站。
链接

这是转换的示例：

* {
  font-size: 16px;
}

h1 {
  font-size: 50px;
}

#first {
  font-size: 12px;
}

<html>

<body>
  <h1>My First Heading</h1>
  <p id="first">My first paragraph.</p>
  <p>My second paragraph.</p>
</body>

</html>

及其在 rem 中的等效CS：

* {
  font-size: 16px;
}

h1 {
  font-size: 3.125rem;
}

#first {
  font-size: 0.75rem;
}

<html>

<body>
  <h1>My First Heading</h1>
  <p id="first">My first paragraph.</p>
  <p>My second paragraph.</p>
</body>

</html>

If you are trying to convert the px to any other sizing units, than I would suggest that you do so using rem unit. Basically rem unit is relative to the size of html root tag.
To further understand it I recommend you to go through this site.
Link

Here is an example of conversion:

* {
  font-size: 16px;
}

h1 {
  font-size: 50px;
}

#first {
  font-size: 12px;
}

<html>

<body>
  <h1>My First Heading</h1>
  <p id="first">My first paragraph.</p>
  <p>My second paragraph.</p>
</body>

</html>

And its equivalent css in rem:

* {
  font-size: 16px;
}

h1 {
  font-size: 3.125rem;
}

#first {
  font-size: 0.75rem;
}

<html>

<body>
  <h1>My First Heading</h1>
  <p id="first">My first paragraph.</p>
  <p>My second paragraph.</p>
</body>

</html>

回复收藏 0 原文

~没有更多了~

关于作者

鸵鸟症

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

屏幕HTML元素大小

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

李珊平

Quxin

范无咎

github_ZOJ2N8YxBm

若言

南…巷孤猫

友情链接

屏幕HTML元素大小

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

李珊平

Quxin

范无咎

github_ZOJ2N8YxBm

若言

南…巷孤猫

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。