Question

我不是前端开发者，但我继承了一个使用媒体查询和宽高比的网页，因此页面内容与视口大小成比例增长，在本例中为浏览器窗口。问题是页面上有一个段落是合理的（向左和向右齐平），所以在某些尺寸下，单词之间的间距对我的客户来说并不美观。我的问题是这种事情的标准做法是什么？可以使用媒体查询和min-width / max-width min-height / max-height设置显示固定大小的内容，具体取决于浏览器窗口的大小，如下所示：

if the viewport size is < x, render content at fixed size a
else if viewport size is < y, render content at fixed size b
else if viewport size is < z, render content at fixed size c
else render content at fixed size d

？

或者？

Answer 1

标准做法是不使用合理的内容，这些内容适用于纸张，但大部分时间不适用于屏幕。

你能做什么，现在你在这里：

.content{
  width:80%; /* dynamic value */
  max-width:500px; /* fixed maximum */
  /* center */
  margin-left:auto;
  margin-right:auto;
}

您需要编辑CSS选择器

现在您已准备好移动设备，并且拥有最大宽度，您可以拥有最好的＆＃34;寻找合理的文本（它多久会改变一次？）。您需要使用这些值来获得适当的结果。

您还可以更改较大视口尺寸的值：

@media screen and ( min-width:1024px ) {
  .content{
    width:70%; /* dynamic value */
    max-width:1440px; /* fixed maximum */
  }
}

当然，您也可以省略动态值并仅使用固定值。

Answer 2

谢谢大家的回复。我只是，至少现在和经过几个小时的阅读和尝试各种事情后，只需稍微更改一个字体大小设置即可解决问题。从2vw到1.98vw。虽然最终用户很高兴，但我希望/需要了解我所做的事情。看起来是时候学习前端工作了。

=PROC(2;1/(C1:C199=P61);A1:A199)

修复CSS所以奇怪的间距永远不会发生在合理的段落中

2 个答案: