根据屏幕大小更改布局答案

【问题标题】：Change layout based on screen size根据屏幕大小更改布局
【发布时间】：2017-06-29 07:27:29
【问题描述】：

我希望我的网站标题的内容在常规尺寸的台式机/笔记本电脑上占据 100% 的屏幕宽度，但在较大的显示器上居中。通过“更大的显示器”，我指的是显示器的实际尺寸，而不仅仅是分辨率。在我的 15 英寸笔记本电脑和 23 英寸台式机（都具有相同的 1920x1080 分辨率）上，我希望显示器有所不同。在 23 英寸的显示器上拥有这么宽的菜单看起来不太好，因为那里有很宽的空白部分。

我目前正在使用.container BootStrap 类作为标题的内容，并且我覆盖了一个媒体查询，以便当屏幕宽度超过 1200 像素时容器的宽度为 100%。同样，这不是我真正想要的：

如果屏幕宽度超过1200px，标题宽度应为100%
如果屏幕宽度超过1920px，header宽度应该是默认的，header应该居中
如果屏幕宽度超过 1200 像素，并且屏幕本身很大（19 英寸以上），则标题宽度应为默认值，标题应居中。

我不确定这是否是最好的方法，但我愿意接受所有建议。

谢谢

【问题讨论】：

你有 codepen codepen.io/pen 或 jsfiddle jsfiddle.net 的例子吗？ .或者至少是一些上下文代码？
@JonathanMarzullo 我确实有一些代码，但我认为它不会真正有帮助。我只有一个带有两个“col-md-6”的“行”，以及我描述的媒体查询。如果您需要特别了解某些内容，请告诉我。
没关系.. 至少显示您减少的 CSS，以便其他人可以参考他们需要在媒体查询 CSS 规则中放置哪些元素选择器。

标签： html css twitter-bootstrap responsive-design media-queries

【解决方案1】：

我的解决方案是使用media queries based on pixel density

这允许写类似的东西

@media screen and (max-resolution: 116dpi){

116dpi 是分辨率为 1920x1080 的 19" 屏幕的 DPI。如果屏幕变大，例如 23"，分辨率相同，像素密度会变低，那么我们就有低于 116dpi 的东西。

【讨论】：

【解决方案2】：

尝试通过最小宽度设置媒体屏幕和限制。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (min-width: 1200px) {
      .container {
          width: 100%;
      }
  }

@media screen and (min-width: 1920px) {
      .container {
          width: 500px;
      }
  }

【讨论】：