改变字体大小的响应式设计

Question

我只有一个问题。所以也许我会更好地理解这个问题。

我有一个网站。 font-size将是2em（Notebook）。当我检查页面（Chrome模拟器）时，例如galaxy它看起来很好。当我检查时，例如iPad的字体大小会更小。

所以，我必须做的是，我们可以为每部手机确定字体尺寸吗？我是否必须为每个“宽度”写一个额外的媒体查询来设置字体大小？

#mediendesign {
    font-size: 2rem;
    color: #ffffff;

}

我必须为每个屏幕尺寸写吗？或者我能做些什么，它适用于每个屏幕？

Answer 1

CSS 3具有与viewport相关的单位。比如

vh - 用于视口高度， vw - 用于视口宽度

示例 -

如果您像这样定义字体大小

   #mediendesign {
    font-size: 2vw;
    color: #ffffff;
}

它变为视口宽度的2％。因此它变得敏感。

以下文章详细解释了整件事。

Viewport Sized Typography

Answer 2

响应式网页设计：

CSS3引入了一些新单元，包括rem单元，代表“root em”.em单元是相对于父单元的字体大小，这会导致复合问题。 rem单元相对于root或html元素。这意味着我们可以在html元素上定义单个字体大小，并将所有rem单位定义为该百分比。因此，您可以编写如下代码（基于750px）：

 /* 10px === 1rem, the default font-size of html-element is 16px  */
 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
 /* The @media rule is used to define different style rules for different media types/devices. */
 @media (min-width:640px) and (max-width: 999px) {

       /* 750/640 = 1.17*/

        html{font-size: 53.42%;}  /*62.5% / 1.17 */

  }

 @media (min-width: 400px) and (max-width:450px){

      /*  750 / 400 = 1.875 */

     html{font-size:33.33% } /* 62.5% / 1.875 */

  }

  @media (min-width:360px) and (max-width: 399px) {

       /*  750 / 360 = 2.08 */

      html{font-size:30%}   /* 62.5% / 2.08  */

  }

 @media (min-width: 320px) and (max-width:359px){

      /*  750/320 = 2.34 */

     html{font-size: 26.7%}  /* 62.5 / 2.34 */

 }

#mediendesign {
font-size: 2rem;
color: #ffffff;
}

如果我认为你的ipad分辨率是768 * 1024和font-size: 2rem;。所以最终的渲染结果：

  #mediendesign {
  font-size: 17.0944px;/* (53.42%/62.5%)*10px*2rem=17.0944px */
  color: #ffffff;
  }

最后，您可以调整html{font-size: xx%}以满足您的要求。