Question

我需要帮助：我网站上的这个特定文字给了我一个问题。它在台式机和平板电脑上看起来很棒但在移动设备上看起来太大了。

我想知道如何编辑代码，以便当有人使用移动设备时，它会调整大小以使其看起来更小。

Here is my website。
我正在谈论的网站上的文字是“如果你能为一个漂亮的网站支付一次怎么办？你可以和我们在一起。只需一次性费用，不附加条款。请在下面选择你的套餐，这样我们就可以开始了离开。“

按照我的代码：

<span style="font-size: 17pt;">
    <span style="color: #ff0000;"><em>What if you could pay once for a beautiful website?</em></span>
    You can with Us. <strong>Just A One Time Fee, No Strings Attached</strong>.
    Choose your package below so we can start right away.
    <img class="alignnone wp-image-518" src="http://www.phincer.com/wp-content/uploads/2016/10/1477055136_happy.png" alt="1477055136_happy" width="55" height="55" />
</span>

Answer 1

更改字体大小。你想要多少。

@media(max-width:400px){
  .responsive-text{
       font-size:14px;
      }
    }


<span class="responsive-text" style="font-size: 17pt;">
<span style="color: #ff0000;"><em>What if you could pay once for a beautiful website?</em></span>
You can with Us. 
<strong>Just A One Time Fee, No Strings Attached</strong>
. Choose your package below so we can start right away.   <img class="alignnone wp-image-518" src="http://www.phincer.com/wp-content/uploads/2016/10/1477055136_happy.png" alt="1477055136_happy" width="55" height="55" /></span>

Answer 2

查看this页面：

字体大小可以使用不同的度量单位来声明你的大小文本应该是 - 像素（px），点（pt），EMs（em）和百分比（％）在上面的示例代码中，它使用百分比。

举个例子：

p{font-size:120%;}

此外，您可以查看this网站以获取设备的尺寸，提供更准确的媒体查询，以区分您应在每台设备上使用的css。

Answer 3

您可以尝试使用媒体查询根据您使用的设备添加自适应文本。例如，尝试在CSS样式表中添加此内容，您可以更改设备的宽度（当前为320px）。

@if (isset($start)) <--by key
{{'its there'}}
@else
{{'its not there'}}
@endif

制作文字响应式HTML

3 个答案: