gpt4 book ai didi

html - 如何通过一次声明使字体大小响应不同大小的设备

转载 作者:可可西里 更新时间:2023-11-01 15:02:11 25 4
gpt4 key购买 nike

<分区>

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

.heading{font-size: 50px;}

@media all and (min-width: 768px) and (max-width: 800px){
.heading{font-size: 40px;}
}

@media all and (min-width: 400px) and (max-width: 480px){
.heading{font-size: 30px;}
}

@media all and (min-width: 320px) and (max-width: 375px){
.heading{font-size: 20px;}
}
<h1 class="heading">Font size issue for different devices</h1>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com