我花了1个小时的时间才能知道(并获得可行的资源)调整大小是如何在CSS(媒体)中触发的,以及由哪个组件触发。 我想要的是它在浏览器中的工作方式,调整窗口大小时的作用。不是代码。
我发现的是如何调整大小和其他代码结果,但不是理论要点它如何工作。
感谢您的帮助。
媒体查询以这种方式工作。
<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) { ... }