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

Posted

技术标签:

【中文标题】如何通过一次声明使字体大小响应不同尺寸的设备[重复]【英文标题】: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 #

【讨论】:

以上是关于如何通过一次声明使字体大小响应不同尺寸的设备[重复]的主要内容,如果未能解决你的问题,请参考以下文章

移动设备的 CSS 字体大小

如何使对话框响应不同的屏幕尺寸?扑

如何使用情节提要为不同的 iPhone 屏幕尺寸设置不同的字体尺寸?

如何在Materialise中使字体大小响应

与尺寸相关的事情:在响应式网页设计中平衡行宽和字体大小

响应式字体设置rem,em,px