是否可以在不同屏幕上查看页面？

问题描述

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

解决方法

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%;
  }
}

,

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

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

有关框架的更多信息，请查看Bootstrap Documentation和Bootstrap Examples。