如何为移动设备调整文本大小 (Css)答案

【问题标题】：How to resize text for mobile devices (Css)如何为移动设备调整文本大小 (Css)
【发布时间】：2018-06-19 23:33:47
【问题描述】：

当前在将文本缩小到移动设备大小时遇到问题，因为当前视差图像顶部有一个文本元素，并且当浏览器调整大小或在移动设备上时，一半的文本不在屏幕上。我可以移动文本，但很难调整其大小以适应移动屏幕。

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

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。

标签： css wordpress

【解决方案1】：

是的，你可以有新的字体属性，请看下面的链接 https://css-tricks.com/viewport-sized-typography/

【讨论】：

【解决方案2】：

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

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

或任何其他方法。

接下来，您应该使用 Viewport Sized Typography 以获得更好、更准确的响应。例如：

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

结果应该类似于this。

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

【讨论】：

【解决方案3】：

尝试使用其他单位。例如视口宽度。尝试将文本设置为例如。 calc(16px + 2vw); 玩弄像素或视口宽度值，直到找到可以随心所欲缩放的解决方案。查看这篇 CSS 技巧文章 Fun with Viewport Units. 还可以查看 CSS calc 函数。很有用A Couple of Use Cases for Calc()

【讨论】：