如何通过一次声明使字体大小响应不同尺寸的设备[重复]

Posted 2023-03-06

【中文标题】如何通过一次声明使字体大小响应不同尺寸的设备[重复]

【英文标题】：how to make font size responsive for different size devices with one time declaration [duplicate]

【发布时间】：2017-12-16 09:09:13

【问题描述】：

面临字体大小设置问题。为了更好的可读性，我正在为不同的设备（即移动设备、平板电脑和超小型设备）更改我的字体大小，这样我的 css 正在增加，这对页面速度和优化也是致命的。我只想调整我的字体大小自动根据容器大小。 这是我为不同的设备和图像编写的示例代码，用于输出以了解问题

.headingfont-size: 50px;

@media all and (min-width: 768px) and (max-width: 800px)
  .headingfont-size: 40px;


@media all and (min-width: 400px) and (max-width: 480px)
  .headingfont-size: 30px;


@media all and (min-width: 320px) and (max-width: 375px)
 .headingfont-size: 20px;

<h1 class="heading">Font size issue for different devices</h1>

【参考方案1】：

.heading 
  font-size: 50px;


@media (max-width: 800px) 
  .heading 
    font-size: 40px;
  


@media (max-width: 480px) 
  .heading 
    font-size: 30px;
  


@media (max-width: 375px) 
  .heading 
    font-size: 20px;
  

<h1 class="heading">Font size issue for different devices</h1>

当你使用媒体查询时只使用@media（参数）或者使用

.headingfont-size: 100%;

【参考方案2】：

将em 用于响应式网站。 em 是用于网络文档媒体的可扩展单元。 em 等于当前的font-size，例如，如果文档的font-size 为12pt，则1em 等于12pt

.headingfont-size: 1.6em;

@media (max-width: 800px)
  .headingfont-size: 1.4;


@media (max-width: 480px)
  .headingfont-size: 1.2em;


@media (max-width: 375px)
 .headingfont-size: 1em;

<h1 class="heading">Font size issue for different devices</h1>

【讨论】：

em 可能是可缩放的，但仍不会自动更改字体大小。所以很遗憾，这并没有回答所提出的问题。

【参考方案3】：

**.headingfont-size: 20vw;
==============
@media (max-width: 800px)
  .headingfont-size: 16vw;

==============
@media (max-width: 480px)
  .headingfont-size: 14vw;

==============
@media (max-width: 375px)
 .headingfont-size: 12vw;

==============
 - List item
# vw doest not support in safari browser #