Question

我对弹性框和媒体查询之间的区别感到困惑吗？

在Google中找不到答案。我知道我们在flex框中使用媒体查询，但我仍然不知道区别

Answer 1

Flex box是一种布局模型

这是一种在页面上布置元素的方法，以使它们的大小和方向灵活。 Flexbox没有印刷的真实依据。这是为网络唯一创建的布局模型，实际上仅对网络有意义。

Flexbox通过特定规则集的属性和值使用：

.someSelector {
display: flex; /*a new value for the display property*/
flex-direction: column; /*a new property*/
}

媒体查询是媒体类型的扩展 媒体查询是一种流行的技术，可将量身定制的样式表发送到不同的设备。

在HTML4和CSS2中，您可以根据查看媒体的类型发送样式表，而不是根据该媒体的特定属性发送样式表。

媒体查询可让您基于特定媒体的属性以及媒体类型来应用样式表：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 499px)" href="mobile.css">

不仅如此，媒体查询也可以放在样式表中：

@media screen and (max-width: 499px) {
  body {
    font-size: .8rem;
  }
}

Flexbox位于规则集中。媒体查询不在规则集中。

Flexbox告诉一个元素如何占用空间。媒体查询可告诉您如何查看内容。

此外，flexbox +媒体查询=很棒的布局

Answer 2

媒体查询是CSS3中引入的CSS技术。仅当满足特定条件时，它才使用@media规则来包含CSS属性块。

window.addEventListener('beforeunload', function (event) {  // or 'unload'
    navigator.sendBeacon(URL, JSON.stringify({...}));

    // more safely (optional...?)
    var until = new Date().getTime() + 1000;
    while (new Date().getTime() < until);
});

Flexbox是CSS3中的新布局模式。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

弹性框和媒体查询有什么区别？

2 个答案: