Question

当前存在将文本缩放到移动大小的问题，因为当前视差图像在其顶部具有文本元素，并且当调整浏览器大小或在移动设备上时，一半的文本不在屏幕上。我可以四处移动文本，但是努力调整其大小以适合移动屏幕。

@media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;

（。vc_custom是元素名称）

有问题的页面-https://www.xordium.co.uk/your-cloud-journey/

Answer 1

是的，您可以在那里找到新字体属性，请参见下面的链接 https://css-tricks.com/viewport-sized-typography/

Answer 2

首先，您的css规则不适用于标题中的文本。 See this image。尝试直接选择跨度：

@media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...

或其他任何方法。

接下来，您应该使用视口大小的版式来获得更好，更准确的响应速度。例如：

@media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...

结果应类似于this。

我知道这不是最好的外观，但是尝试其他一些数字，直到找到合适的东西为止。

Answer 3

尝试使用其他装置。例如视口宽度。尝试将文本设置为例如。 calc(16px + 2vw); 尝试使用像素或视口宽度值，直到找到可以根据需要缩放的解决方案。查看此CSS技巧文章Fun with Viewport Units. 还要检查CSS calc函数。它非常有用的A Couple of Use Cases for Calc()

如何为移动设备（Css）调整文本大小

3 个答案: