如何在使用 flex box 时根据屏幕尺寸保持字体大小比例
How to maintain font size ratio based on screen size while using flex box
我得到了一个网页的 Figma 设计。 Figma 页面宽度为 1825px。我笔记本电脑的宽度是 1080px。假设 Figma 页面中的文本字体大小为 20px。如何将它转换到我的笔记本电脑以保持比例？
我不能使用百分比，因为我正在使用 flexbox。当我尝试使用百分比时，它所做的是采用其父容器的百分比而不是整个容器的百分比。
我也试过用VW。根据 1825px 断点计算视图宽度并实现。问题是像素在这种方法中变得扭曲。
此外，这个答案 Typography using VW 得到了很多赞成票，这意味着 VW 有效，那我为什么会遇到这个问题？
我正在使用 React，我不需要任何 javascript 解决方案。有什么方法可以仅使用 CSS 来解决这个问题吗？
最简单的方法是使用媒体查询。
https://developer.mozilla.org/es/docs/CSS/Media_queries
您也可以尝试其他单位，如 vw（视图宽度）、rem（相对于根元素的字体大小）等...
您确定需要这样做吗？到达断点时，字体大小通常会发生变化。
但如果你真的需要这样做，你可以根据视口宽度设置font-size。
因此，如果 20px font-size 在 1825px 宽度上是所需的比例，那么您需要将 font-size 设置为 0,01vw 以保持所有屏幕尺寸的比例。
我得到了一个网页的 Figma 设计。 Figma 页面宽度为 1825px。我笔记本电脑的宽度是 1080px。假设 Figma 页面中的文本字体大小为 20px。如何将它转换到我的笔记本电脑以保持比例？ 我不能使用百分比，因为我正在使用 flexbox。当我尝试使用百分比时，它所做的是采用其父容器的百分比而不是整个容器的百分比。
我也试过用VW。根据 1825px 断点计算视图宽度并实现。问题是像素在这种方法中变得扭曲。 此外，这个答案 Typography using VW 得到了很多赞成票，这意味着 VW 有效，那我为什么会遇到这个问题？
我正在使用 React，我不需要任何 javascript 解决方案。有什么方法可以仅使用 CSS 来解决这个问题吗？
最简单的方法是使用媒体查询。
https://developer.mozilla.org/es/docs/CSS/Media_queries
您也可以尝试其他单位，如 vw（视图宽度）、rem（相对于根元素的字体大小）等...
您确定需要这样做吗？到达断点时，字体大小通常会发生变化。
但如果你真的需要这样做，你可以根据视口宽度设置font-size。
因此，如果 20px font-size 在 1825px 宽度上是所需的比例，那么您需要将 font-size 设置为 0,01vw 以保持所有屏幕尺寸的比例。