如何为屏幕设置媒体查询，例如我无法在开发工具中进行反复试验的号码布

Question

我对响应行为进行了媒体查询，并且从小型到大型设备(例如笔记本电脑(都运行良好，但是有人在Mac上尝试过，内容变得一团糟。如何为我不知道的屏幕尺寸设置 de 媒体查询？谢谢

Answer 1

媒体查询旨在定义特定的最大宽度和最小宽度。 对于未知的大屏幕，您有 2 个选项：

1.当屏幕尺寸达到特定宽度时，设置固定宽度，以便您的内容始终以相同的方式显示。

@media screen and (min-width: 1400px) {
.page-wrapper {
width: 1400px;
}
}

2.注意将页面设置为 100%，并在所有主要元素(那些可能看起来损坏的元素(上使用百分比。

@media screen and (min-width: 1400px) {
.page-wrapper {
width: 100%;
}
}