Question

我想在所有设备中调整文本大小。当我在我的电脑上观看时看起来不错，但是当我在手机上查看它时，它不适合盒子并与上方和下方的按钮重叠

这是我的代码

＆＃13;

.container-profile {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  max-width: 100%;
  height: auto;
}

.overlay-profile {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container-profile :hover .overlay-profile {
  opacity: 1;
}

.text {
  color: white;
  font-size: auto;
  position: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: translate(-50%, -50%);
}

＆＃13;

<div class="wrapper bgded; container-profile">
  <div class="container-profile">
    <img src="https://www.kent.ac.uk/sportsciences/employability/images/image-pending.png" alt="Avatar" class="image">
    <div class="overlay-profile">
      <div class="text">
        <p class="text-justify">SCORE (Standing Commitee on Research Exchange) merupakan Organisasi berbentuk Badan Semi Otonom, bersifat Independent dan berstatus sebagai satu-satunya organisasi penelitian mahasiswa Fakultas Kedoktean Universitas Sumatera Utara yang bergerak
          di bidang penelitian dan kelimiahan. Berdiri pada tanggal 19 Agustus 2003 dan berkedudukan di Medan, Kampus FK USU. Semenjak berdiri, SCORE bertujuan untuk mewujudkan dan menumbuhkan budaya ilmiah di lingkungan Kampus Fakultas Kedoktean Universitas
          Sumatera Utara. SCORE tergabung dalam Badan Analisis dan Pengembangan Ilmiah Nasional Ikatan Senat Mahasiswa Kedokteran Indonesia (BAPIN ISMKI).</p>
        <br>
        <p style="font-style: italic; text-align: center;">Scripta Manent Verba Volent <br> "Yang tertulis akan abadi, dan yang terkatakan akan binasa"</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

点击here例如

Answer 1

只需在HTML文件中添加元数据，如

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

这将调整设备中的字体大小。

Answer 2

您可以使用媒体查询获取不同大小的字体以适合您正在使用的设备。

more about media queries

Answer 3

设置.logoHeader div height auto。

.logoHeader{
    height: auto;
    min-height: 120px;
}

如果那不是问题。你可以查看Nitheesh和Al Amin的答案。

Answer 4

只是花一些时间玩Viewport-percentage

视口百分比值为：

vw（视口宽度）
vh（视口高度）
vi（根元素内联轴方向视口大小的1％）
vb（根元素块轴方向视口大小的1％）
vmin（vw或vh中的较小者）
vmax（较大或vw或vh）

希望您使用vw这样的问题解决问题：

.text {
    font-size: 5vw;  // OR whatever value you need
}

如何调整所有设备中的文字大小？

4 个答案: