更改字体大小响应式设计

Question

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

我有一个网站。字体大小将为 2em（笔记本）。当我使用例如检查页面（Chrome 模拟器）时银河它看起来不错。当我检查它时iPad字体会变小。

所以我必须做的是，字体大小是否适合每部手机？我是否必须为每个 "width" 编写一个额外的媒体查询来设置字体大小？

#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 引入了一些新的单位，包括代表 "root em" 的 rem 单位。em 单位是相对于父字体大小的，这会导致复合问题。 rem 单位是相对于根元素或 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%}以满足您的要求。

更改字体大小响应式设计

change the font - size responsive design

css

font-size

响应式网页设计：