【已解决】css中如何实现高度和宽度一样都是宽度的某个百分比

折腾：

【已解决】ReactJS的布局在小米3手机中布局错乱

期间，需要实现：

css中让svg的高度和宽度一样

而宽度是父级元素定义的，是20%的屏幕宽度

css height equal to width

html – css height same as width – Stack Overflow

Height equals width with pure CSS

SASS make width equal height – CSS-Tricks

Fluid Width Equal Height Columns | CSS-Tricks

javascript – Height equal to dynamic width (CSS fluid layout) – Stack Overflow

用之前别人说过的：

去试试：

然后的确生效了：

另外，顺带去看看：

vw，vh

以及从：

Can I use… Support tables for HTML5, CSS3, etc

看到的：

vmin，vmax

分别对应的是：

vw=viewport width=视图的宽度=一般都是屏幕的宽度

vh=viewport height=视图的高度=一般都是屏幕的高度

vmin=min of viewport width and height=视图的宽度和高度中最小的一个

vmax=max of viewport width and height=视图的宽度和高度中最大的一个

css vw vh

视区相关单位vw, vh..简介以及可实际应用场景 « 张鑫旭-鑫空间-鑫生活

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth或window.innerHeight

7个你可能不认识的CSS单位 · Issue #1 · simaQ/cssfun

CSS中如何使用视窗单位_CSS3, vw, vh, vmin, vmax 教程_w3cplus

<length> – CSS | MDN

【总结】

此处，通过设置：

实现了：

让svg的高度和（父级中定义好的宽度为屏幕宽度的20%）一样的宽度。

其中：

• vw=viewport width=视图的宽度=一般都是屏幕的宽度

• vh=viewport height=视图的高度=一般都是屏幕的高度

• vmin=min of viewport width and height=视图的宽度和高度中最小的一个

• vmax=max of viewport width and height=视图的宽度和高度中最大的一个

转载请注明：在路上 » 【已解决】css中如何实现高度和宽度一样都是宽度的某个百分比