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

Question

我有这个简单的 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>

`

Answer 1

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

Answer 2

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

1- 像这样将字体大小添加到 HTML 正文中：

html{
  font-size:16px;
}

2- 元素字体大小如下：

title{
  font-size: 3rem;
}

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

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

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

Answer 3

首先，您需要确保 understand the different values css offer us 以便更好地了解何时使用它们。

解决此问题的正确方法是在 css 文件中 set up a @media query 以便它可以根据屏幕大小更改其值，在本例中为 600 像素或更小。我还建议使用 rem 而不是 em，因为如果您不完全理解 how it works, as for rem it is always based on the root font size so it's more predictable，

，嵌套 em 可能并不总是像您期望的那样锻炼

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

  }

一种更现代、更简单但有时混乱的方法是接近 font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: 并控制一切，你会以这样的方式结束：

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

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

HTML/CSS - Adjust font-size when going between desktop and mobile

html

css

mobile

font-size