理论-浏览器如何触发调整大小？

Question

我花了1个小时的时间才能知道（并获得可行的资源）调整大小是如何在CSS（媒体）中触发的，以及由哪个组件触发。 我想要的是它在浏览器中的工作方式，调整窗口大小时的作用。不是代码。这样做的目的是创建一个顺序图，以描述调整课程大小时发生的情况。

我发现的是如何调整大小和其他代码结果，但不是理论要点它如何工作。

感谢您的帮助。

Answer 1

媒体查询以这种方式工作。

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

       <a data-viewport="375×667">iPhone 6</a>


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }