如何在手机预览中重新缩放主页的文本？答案

【问题标题】：How can I re-scale the text of homepage on phone preview?如何在手机预览中重新缩放主页的文本？
【发布时间】：2021-10-17 11:23:20
【问题描述】：

our website主页上的“A GOLDEN JOURNEY TO EVERYWHERE”文字有问题

首页文字大，显示器/平板屏幕预览没有问题。但是对于手机屏幕，文字不会重新缩放，并且太大以至于无法完全显示在手机屏幕上，并且两边都缺少几个字母。

我怎样才能自定义文本的大小也用于手机预览来解决这个问题。

CSS 代码：

/** Start Block Kit CSS: 144-3-3a7d335f39a8579c20cdf02f8d462582 **/

.envato-block__preview{overflow: visible;}

/* Envato Kit 141 Custom Styles - Applied to the element under Advanced */

.elementor-headline-animation-type-drop-in .elementor-headline-dynamic-wrapper{
   text-align: center;
}
.envato-kit-141-top-0 h1,
.envato-kit-141-top-0 h2,
.envato-kit-141-top-0 h3,
.envato-kit-141-top-0 h4,
.envato-kit-141-top-0 h5,
.envato-kit-141-top-0 h6,
.envato-kit-141-top-0 p {
   margin-top: 0;
}

.envato-kit-141-newsletter-inline .elementor-field-textual.elementor-size-md {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}

.envato-kit-141-bottom-0 p {
   margin-bottom: 0;
}

.envato-kit-141-bottom-8 .elementor-price-list .elementor-price-list-item .elementor-price-list-header {
   margin-bottom: .5rem;
}

.envato-kit-141.elementor-widget-testimonial-carousel.elementor-pagination-type-bullets .swiper-container {
   padding-bottom: 52px;
}

.envato-kit-141-display-inline {
   display: inline-block;
}

.envato-kit-141 .elementor-slick-slider ul.slick-dots {
   bottom: -40px;
}

.pth-hero__background-inner {
background-size: contain !important;
}

.light.css {
   font-size:70%
}

@media screen and (max-width: 375px) {
   div.pth-hero__message.skrollable.skrollable-between h2{ 
           
           letter-spacing: -3PT;
}
   
/** End Block Kit CSS: 144-3-3a7d335f39a8579c20cdf02f8d462582 **/ ```

【问题讨论】：

您是否尝试过为窄视口设置较小的字体大小？或者甚至使字体大小与视口宽度（vw 单位）成比例？

标签： css text responsive cover

【解决方案1】：

由于所有主要浏览器都出现了“clamp”，因此有一种非常方便的方法来定义具有最小和最大尺寸的响应式字体大小：

// using clamp for responsive font sizes:
clamp([min-size], [default-size], [max-size]);


.myText {
  font-size: clamp(1em, 2.5vw, 3em);
}

【讨论】：