css 灵敏/流畅的设计：使用线性插值进行布局

我试着做了类似的事情：CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations

对于600px和更小的视口， Package 器应跨越100%。
对于1800px的视口， Package 器应跨越70%。
所有其余视口的插值。

这是我目前的想法

#square1 {
        background-color: blue;
        margin: 10px 0;
        width: 100%;
        height: 50px;
    }
    
    #square2 {
        background-color: yellow;
        margin: 10px auto;
        width: calc(100% - 20 * (100vw - 600px)/40);
        height: 50px;
    }
    
    #square3 {
        background-color:green;
        margin: 10px auto;
        width: calc(100% - 20 * (max(100vw, 600px) - 600px)/40);
        height: 50px;
    }
    
    #square4 {
        background-color: red;
        margin: 10px auto;
        width: calc(min(100vw, (100% - 20 * (100vw - 600px)/40)));
        height: 50px;
    }

<div id="square1"></div>
<div id="square2"></div>
<div id="square3"></div>
<div id="square4"></div>

平方1仅供参考。

平方2，能工作，但只是因为我任意乘以了20，为什么它能工作？

方块3和方块4应避免视口小于600px时出现水平溢出。两种解决方案都不起作用。

链接到Fiddle here
有什么主意吗？谢谢。
PS：我不是专业的。

此问题的简短答案是：

/* for IE, Opera, Android and older browsers */
.rectangle { width: calc(55vw + 270px) }
@media (max-width:  600px) { .rectangle { width: 100% } }
@media (min-width: 1800px) { .rectangle { width:  70% } }

/* modern browsers */
.rectangle { width: max(70%, min(100%, calc(55vw + 270px))) }

字符串
为了能够使用**“线性方程”，我们需要XY空间中的两个点p1（x1，y1）和p2（x2，y2）**，这两个点描绘了在最小和最大视区尺寸下的最小和最大尺寸。
幸运的是，OP给了我们一些限制：

视口宽度〈= 600 px，元素宽度100%
视口宽度〉= 1800 px，元素宽度70%
视口宽度〉600 px且〈1800 px，元素宽度采用线性方程计算

使用这些约束条件，我们可以定义线性方程所需的两个点：

在视口宽度600 px = x1处，元素宽度为100%（600 px的元素宽度为600 px = y1）
在视口宽度1800 px = x2处，元素宽度为70%（1800 px的元素宽度为1260 px = y2）

我们有两个方程可以处理：

Y轴截距形式：y = mx + B
1.点斜率形式：y = y1 + m（x - x1）
（查看 * MathIsFun: Equation of a Straight Line*，容易理解的中学解释，很值得一读）。
其中，

*m =（y2 - y1）/（x2 - x1）
*x =始终定义为100 vmin、vw、vh或vmax取决于：

视区宽度/高度独立结果（例如字体大小、填充、边距）
视区宽度或高度相关结果（例如，宽度、高度、填充、边距）
*B = y1 - m * x1（参见中间页：Link）

取代的

y =（y二-y一）/（x二-x一）* x +（y -（y二-y一）/（x二-x一）* x一）
y = y1 +（y2 - y1）/（x2 - x1）*（x - x1）
完全替换后，“点斜率形式”是最短的，但是为了保存CPU负载，我选择做一些手动计算，并在最终的CSScalc（）中使用Y截距形式。
通过使用点p1（600，600）和p2（1800，1260）手动计算'm'和'b'，我们将生成可在CSS**calc（）**中使用的最终等式：

m =（1260 - 600）/（1800 - 600）= 0.55
B = 600 - 0.55 * 600 = 270
y = mx + B变为：y = 0.55x + 270（最终方程）

width在本例中与视口宽度相关，因此我们将视口单位vw用于**'x'**

.rectangle { width: calc(0.55 * 100vw + 270px) } /* initially */
.rectangle { width: calc(55vw + 270px) }         /* simplified */

/* with min/max constraints */
.rectangle { width: max(70%, min(100%, calc(55vw + 270px))) }

片段

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

css 灵敏/流畅的设计：使用线性插值进行布局

1条答案

片段

相关问题

热门标签

最新问答