是否可以在不同的屏幕中查看页面？答案

【问题标题】：Is it possible to make a page be viewed in different screens?是否可以在不同的屏幕中查看页面？
【发布时间】：2020-08-13 22:17:45
【问题描述】：

我需要一个可以更改主页布局的代码，以便在不同的 PC 显示器上查看。我已经尝试过“响应式网页设计”，但我不知道是否有办法让它不仅显示在不同的设备上，而且显示在不同的 PC 屏幕尺寸上？提前致谢。

【问题讨论】：

“响应式网页设计”我假设您的意思是媒体查询，在大多数教程中仅限于 @media (max-width: ...) { ... } 或 @media (min-width: ...) { ... }，但实际上有很长的功能列表可供您查询，包括 resolution和aspect-ratio 似乎与您的问题特别相关。完整列表可以在 MDN 上找到：Using media queries
如果你想在不同尺寸的浏览器中快速查看，可以试试responsively.app
它说它对我的电脑很危险

标签： css screen-resolution

【解决方案1】：

css 的 media 标签是您可能想要查看的标签。

引自 w3c here:

@media 规则用于媒体查询，为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度

设备的宽度和高度

方向（平板电脑/手机是横向还是纵向模式？）

分辨率

使用媒体查询是一种向台式机、笔记本电脑、平板电脑和手机提供定制样式表（响应式网页设计）的流行技术。

当您提到不同的 PC 显示器时，我假设您的意思是不同的宽度/长度，或纵横比或分辨率。我还假设您的情况是您想在不同的分辨率上以不同的风格显示内容，但所有内容都在 PC 显示器上，如 720p 或 1080p 或 4k 显示器，以下代码可能会有所帮助。

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

【讨论】：

我会添加它，我现在将测试它
这不起作用。我需要 1024 x 768，我的主页有 3 个导航栏，左右一个，另一个在标题下方的中间。

【解决方案2】：

正如 caoool 所说，Media Queries 就是您要找的。基本上，如果分辨率大于或小于特定值，您可以使用媒体查询编写自定义 css。

仅供参考，有一个很棒的开源 css 框架，名为 Bootstrap，它可以让设计响应式网站变得更加轻松和轻松。

查看Bootstrap Documentation 和Bootstrap Examples 了解有关该框架的更多信息。

【讨论】：