Question

上周，我的一位同事告诉我，我们的其中一页看上去不对劲。原来，他们的屏幕分辨率很奇怪：1279 x 635。

虽然我对基于宽度的响应式设计的概念感到满意，但我之前并没有真正研究基于高度的响应式设计，而是认为分别添加宽度和高度的媒体查询可能会导致意外的交叉。

>

我意识到可以通过缩小字体大小来解决此问题，并且此人的屏幕的纵横比刚好超过2：1，所以我认为按纵横比缩放将是个好主意。

我发现Tim Brown's article是关于使用CSS“锁”来实现行高相似的效果的，这反过来又使我与Mike Riethmuller's article相关联，以实现与字体大小相同的效果。但是，该公式（在his CodePen中得到了很好的注释，该公式还使用了变量-与我尝试实现的变量更相似）需要最小和最大宽度来进行操作。

所以我的下一步是根据宽高比获取最小和最大宽度。因为我知道我想以18/10开始缩放，并在达到2：1时停止缩放（这样我的同事的屏幕就属于“最小字体大小”类别），这仅是在当前屏幕上计算这些宽度的问题大小：

--aspect-width-max: calc( 2 * 100vh );
--aspect-width-min: calc( 1.8 * 100vh );

但是，这打破了惯例。我怀疑这是由于以下事实：公式的尾端需要无单位的值才能计算除数，并且上述calc()函数以vh单位吐出值，尽管我不能有关使用混合单位时calc()的工作原理的更多信息，我将需要使用vh来基于宽高比获取宽度。

我的完整（损坏）代码当前为：

:root{
    --font-size-max:    24;
    --font-size-min:    16;
    --aspect-width-max: calc( 2 * 100vh );
    --aspect-width-min: calc( 1.8 * 100vh );
}
html{
    font-size: calc( var(--font-size-max) * 1px );
    height: 100%;
}
@media (min-aspect-ratio: 18/10){
    html{
        font-size: calc( 16px + ( var(--font-size-max) - var(--font-size-min) ) * ( ( 100vw - (var(--aspect-width-min) * 1px) ) / (var(--aspect-width-max) - var(--aspect-width-min)) ) );
    }
}
@media (max-width: 767px), (min-aspect-ratio: 2/1){
    html{
        font-size: calc( var(--font-size-min) * 1px );
    }
}

有什么想法吗？

按宽高比缩放字体大小

0 个答案: