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

问题描述 投票：0回答：3

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

`

html css mobile font-size
3个回答
2
投票

首先，您需要确保您了解CSS为我们提供的不同值，这样您就可以更好地了解何时使用每个值。

解决此问题的正确方法是在 css 文件中设置 @media 查询，以便它可以根据屏幕的大小（在本例中为 600px 或更小）更改其值。 我还建议使用 rem 而不是 em，因为如果您不完全理解它是如何工作的，嵌套 em 可能并不总是像您期望的那样锻炼，至于 rem 它总是基于根字体大小，所以它更可预测,

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

  }

一种更现代的方法，更简单，但有时很混乱，是使用 vw 值来接近 

font-size:
，它将视口宽度作为一个值，并根据字体将增长的屏幕空间量，这并不总是建议使用，因为文本可能会变得很大，因此您需要限制最大大小，以免变得疯狂，您可以使用 clamp:()
 函数来实现，这是
font-size:
 中使用 vw 单位并保持的更可靠方法一切都在掌控之中，你会以这样的方式结束：

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

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
我认为你应该检查 @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;
  }
}

还有其他方法可以解决这个问题。这只是一个例子。

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

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

    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.