Question

我希望我的网站标题的内容在常规尺寸的台式机/笔记本电脑上占据屏幕宽度的100％，但要以更大的显示器为中心。通过更大的显示器＆＃34;，我也指的是显示器的实际尺寸，而不仅仅是分辨率。在我的15＆＃34;笔记本电脑和我的23＆＃34;桌面（两者都具有相同的1920x1080分辨率），我希望显示器不同。在23＆＃34;上有这么宽的菜单。由于存在宽阔的空白部分，因此显示效果不佳。

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

如果屏幕宽度超过1200像素，则标题宽度应为100％
如果屏幕宽度超过1920px，标题宽度应为默认值，标题应居中
如果屏幕宽度超过1200像素，并且屏幕本身很大（任何高于19和＃34;），标题宽度应为默认值，标题应居中。

我不确定这是否是最佳方法，但我对所有建议持开放态度。

由于

Answer 1

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

这允许编写类似

的内容

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

116dpi是19＆＃34;的DPI。屏幕分辨率为1920x1080。如果屏幕变大，比如23＆＃34;在分辨率相同的情况下，像素密度会降低，然后我们会有一些低于116dpi的东西。

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

根据屏幕大小更改布局

2 个答案: