如何通过一次声明使字体大小响应不同尺寸的设备[重复]
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 #
【讨论】:
以上是关于如何通过一次声明使字体大小响应不同尺寸的设备[重复]的主要内容,如果未能解决你的问题,请参考以下文章