Flex Box 和媒体查询答案

【问题标题】：Flex Box and Media QueryFlex Box 和媒体查询
【发布时间】：2023-03-18 22:20:01
【问题描述】：

当您已经使用了弹性盒子时，您还需要媒体查询来使网站响应吗？有没有媒体查询可以让我们更好地控制的例子？

【问题讨论】：

代码在哪里？没有代码，我们无能为力。这个问题也太自以为是/冗长
flex 有时无法正常工作。您应该始终使用响应式媒体查询网站
如果您想为特定设备设置响应式样式，您需要媒体查询，因为始终 flex 不起作用，并且在直到选项卡设备上 flex 工作，但之后，对于移动设备，我们需要使用媒体查询（移动屏幕）。

【解决方案1】：

FlexBox 是一回事。 Responsive Web Desing (RWD) 与众不同。

FlexBox 是一组原生 CSS 属性，可让您将一些与布局相关的特定样式应用于父元素和子元素。

RWD 是一种调整网站以适应各种屏幕尺寸的方法。为了实现这一点，您可以使用@MediaQueries。 Flexbox 不是 mediaQueries 的替代品。当你一起使用它们时，魔法就会发生。想象这样一种情况，当用户的屏幕尺寸低于 768 像素时，您想要替换“背景”css 属性中的 img scr。如果没有 @Media 规则，您将如何使用 Flexbox 做到这一点？ MediaQueries 真的很强大，让您可以根据屏幕宽度控制网站上的不同布局。

【讨论】：

在 Angular 中使用 flex-layout 时会发生同样的事情吗？也就是说，如果您使用 flex-layout，在某些时候使用媒体查询会不会被认为是不好的做法？我希望容器的高度在不同的断点（xs、sm、md、...）处不同，但我找不到直接使用 flex-layout 指令的方法。有没有办法做到这一点？如果我使用媒体查询这样做会不会出错？
在大多数情况下使用媒体查询是实现完全响应式网站的必要条件。您可以将它与每个框架一起使用。媒体查询是 CSS 功能，与 Angular/React/Vue 无关。使用 3/4 个断点来调整页面样式绝对不是一个坏习惯。当你有太多断点时，你可以称之为不好的做法:)
好的。这将是重用相同的 flex-layout 断点。示例：xs = max-width: 599px，那么我希望当屏幕的最大宽度为 599px 时，容器的高度例如为 300px；然后在 CSS 中，我会对 max: width: 599px 做一个平均查询并放置 height: 300px。

【解决方案2】：

Flex-box 和 网格布局，以及多列布局默认情况下是响应式的。这些规范是在响应式设计和支持多种设备的世界中编写的。这意味着它们包含许多常识性功能，无需我们做太多事情即可实现响应式设计。

如果我们想改变某些列的大小或比例，我们必须使用媒体查询添加断点并重新定义它们。在使用百分比时，我们没有其他选择，因为无论容器是宽还是窄，它们始终是它们所在容器的相同百分比。

【讨论】：

在 Angular 中使用 flex-layout 时会发生同样的事情吗？也就是说，如果您使用 flex-layout，在某些时候使用媒体查询会不会被认为是不好的做法？我希望容器的高度在不同的断点（xs、sm、md、...）处不同，但我找不到直接使用 flex-layout 指令的方法。有没有办法做到这一点？如果我使用媒体查询这样做会不会出错？

【解决方案3】：

是的，有很多事情你仍然会使用媒体查询。您可能希望在移动设备上从 flex-basis: 200px; 切换到更灵活的 flex-basis: 50%; 宽度。

两者结合可能是最好的。如果您正在使用百分比并且不想在较小的设备上使用不同的列数，那么恕我直言，媒体查询无法解决。

【讨论】：

在 Angular 中使用 flex-layout 时会发生同样的事情吗？也就是说，如果您使用 flex-layout，在某些时候使用媒体查询会不会被认为是不好的做法？我希望容器的高度在不同的断点（xs、sm、md、...）处不同，但我找不到直接使用 flex-layout 指令的方法。有没有办法做到这一点？如果我使用媒体查询这样做会不会出错？
在使用 flex-layout 时使用媒体查询是不错的做法。