HTML/CSS - 在桌面和移动设备之间切换时调整字体大小答案

【问题标题】：HTML/CSS - Adjust font-size when going between desktop and mobileHTML/CSS - 在桌面和移动设备之间切换时调整字体大小
【发布时间】：2021-07-11 23:54:56
【问题描述】：

我有这个简单的 html 文件，我试图了解为什么当我移动到移动视图时我的字体大小没有按比例缩小。我虽然font-size:7em 会在从桌面移动到移动时进行调整。

我知道这很愚蠢，但我无法理解。我需要使用@media query吗？

`

body {
    background: black;
    font-family: "Big Caslon";
    margin-top:3em;
    margin-bottom:3vw;
    margin-left:12vw;
    margin-right:12vw;
  }

section {
    color: white;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }

.title {
  font-size:7em;
  margin:10px;
}

<html>
  <head>

    <title>ShopDoran</title>
    <link rel="icon" href="">
    <link rel="stylesheet" type="text/css" href="doran.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

  <section>
    <div class="title">  D O R A N  </div>
    <p style="font-size:2em; margin:10px;">coming soon </p>
  </section>

</html>

【问题讨论】：

您需要查看CSS units 以了解它们的工作原理，并且媒体查询肯定会满足您的预期
em是相对于元素的font-size（7em表示当前字体大小的7倍），所以font-size:7em可能是一个递归定义。你的意思是rem？ vw 和 vh 也可能会有所帮助。

标签： html css mobile font-size

【解决方案1】：

首先，您需要确保您是understand the different values css offer us，这样您就可以更好地了解何时使用每一个。

解决此问题的正确方法是在 css 文件中添加 set up a @media query，以便它可以根据屏幕大小更改其值，在本例中为 600 像素或更小。我还建议使用 rem 而不是 em，因为如果您不完全理解 how it works，嵌套 em 可能并不总是像您期望的那样锻炼，至于 rem 它始终基于根字体大小，所以 it's more predictable，

@media screen and (max-width: 600px) {
  .title {
    font-size: 2rem;

  }

一种更现代、更简单但有时混乱的方法是接近font-size: with vw values，它将视口宽度作为一个值，并且取决于字体会增长的屏幕空间量，这并不总是推荐作为文本可以变大，因此您需要限制最大尺寸以防止事情变得疯狂，您可以使用clamp:() 函数（即a more reliable way of using vw units in font-size:）来控制一切，并以这样的方式结束：

.title{font-size: clamp(2rem 5vw 7rem);}

【讨论】：

【解决方案2】：

嗨 @giaggi 使用单位 '''font-size:7vw''' 作为字体大小应该可以解决问题

【讨论】：

【解决方案3】：

我认为你应该检查@Burham B. Soliman 提到的 CSS 单元，但我会就如何制作它画一个指南：

1- 将字体大小添加到您的 HTML 正文中，如下所示：

html{
  font-size:16px;
}

2- 像这样调整元素字体的大小：

title{
  font-size: 3rem;
}

3- 为所需视口大小（例如 600 像素）设置媒体查询：

@media only screen and (max-width: 600px) {
  html{
    font-size: 10px;
  }
}

还有其他方法可以处理此问题。这只是一个例子。

【讨论】：