我应该避免使用 px 使 react-app 移动友好吗？答案

【问题标题】：Should I avoid using px to make react-app mobile friendly?我应该避免使用 px 使 react-app 移动友好吗？
【发布时间】：2019-04-21 09:12:19
【问题描述】：

什么是让我的网络应用适合移动设备的好方法？我一直在使用 px 但是我应该只使用 vw 和 vh 吗？另外，我是否应该将 @media 用于 css 一百万次？

【问题讨论】：

【解决方案1】：

这是一个很好的电子表格：https://www.w3schools.com/cssref/css_units.asp

根据我的经验可以说：

【讨论】：

所以，基本上我应该总是使用 vw 或 vh？
1.在任何情况下您都将使用@media，因为某些块在移动设备上应该是 80% 的宽度，而在计算机/笔记本电脑上只有 65-70% 等等。 2. 我不能说“只用它”，因为位置不对。 % 和 vw/vh 相似，但它们解决问题的方式不同。只有经过一定的尝试，你才能得到它。有时我会忽略它们并使用弹性盒。如您所见，这取决于任务。

【解决方案2】：

这是一个相当广泛的话题。不过，这里有一些事情可能会对您有所帮助。

px 还不错，有很多用例。例如，当我设置对象的高度时，我倾向于使用px。由于响应性通常与宽度相关，因此有点棘手，但您可以使用 min-width 或 max-width 之类的东西来开始考虑响应性。

您也可以使用百分比，但我个人喜欢使用 flexbox 或 grid 等 CSS 布局来设置我的网站。因为它们往往更灵活。所以部分响应式设计已经通过使用 css 布局模块来实现。

一般来说，在如何使页面具有响应性方面没有硬性规定，因为每个网站都是不同的。您会发现数百个网站为您提供 @media 尺寸，适用于人类已知的各种屏幕尺寸，但更重要的是查看您的网站并查看内容在增长或缩小时自然开始中断的位置。然后，您可以更准确地确定您希望 @media 何时生效。

最后，你不应该使用@media 一百万次，只在你决定你的布局需要改变的地方。然后，只需在单个 @media 内实现您的 css 更改，即可在该特定屏幕尺寸及以下或以上更改您想要更改的所有内容。

【讨论】：