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

我想让文字在所有设备中调整大小。它看起来很好，当我查看我的电脑，但是当我查看我的手机上，它不适合于盒子，上面和下面如何调整所有设备中的文本大小？

这里的按钮重叠是我的代码

.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%); 
 
}

<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>

点击here例如

来源

2017-09-16 Raynald Pradigo

考虑使用引导程序的网格布局来设置元素可以在不同大小的设备上使用的空间。 https://v4-alpha.getbootstrap.com/layout/grid/。同样为了分隔你的元素，你可以试试flexbox。可在线获得的教程数量可以一起使用。 – RafatMunshi

在根目录（html）上设置默认的'font-size'，然后'media queries'的每个断点处的'rem'中的其他字体大小都会改变根目录的'font-size'和所有'font-size'的' rem'将改变与根有关。这远非完美的解决方案（因此它是一个评论）。 – zer00ne

只是花一些时间与Viewport-percentage

视区的百分比值打都：

vw（视宽）
vh（视高度）
vi（视口大小的1％在）的根元素的字形轴的方向上）
vb（在根元素的块轴的方向上的视口大小）的1％
vmin（的vw较小或vh
vmax（较大或vw或vh）

希望，如果你使用vw你这样的问题将得到解决：

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

来源

2017-09-16 05:31:30 alamin

感谢您的建议。它解决了当我添加一个新的1'vw'' font-size' –

很高兴听到:) – alamin

只需要在你的HTML文件中添加元数据像

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

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

来源

2017-09-16 05:15:33 Nitheesh

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

more about media queries

来源

2017-09-16 05:15:50 sinthu225

设置.logoHeader div height auto。

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

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

来源

2017-09-16 06:03:52

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

回答

相关问题