根据屏幕尺寸更改布局

我希望我的网站标题的内容占用普通尺寸桌面/笔记本电脑屏幕宽度的100％，但要在较大的显示器上居中显示。通过“更大的显示器”，我指的是显示器的实际尺寸，而不仅仅是分辨率。在我的15英寸笔记本电脑和23英寸的桌面上（两者的分辨率都是1920x1080），我希望显示器有所不同。在23英寸的显示器上有这么宽的菜单并不好看，因为有很多空的部分。根据屏幕尺寸更改布局

我目前使用的是一个.container BootStrap类的标题内容，我重写了媒体查询，容器有当屏幕宽度超过1200像素100％的宽度再次，这是不是真的是我想要的：。

如果屏幕宽度超过1200像素，头部宽度应为100％
如果屏幕宽度超过1920px，标题宽度应该是默认值，标题应该居中
I如果屏幕宽度超过1200px，并且屏幕本身很大（大于19“的任何东西），则标题宽度应该是默认值，并且标题应居中。

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

谢谢

来源

2017-02-10 user1319182

你有codepen http://codepen.io/pen/或jsfiddle https://jsfiddle.net/例子吗？。或者至少是一些上下文的代码？ –

@JonathanMarzullo我确实有一些代码，但我不认为它真的有帮助。我只有两个“col-md-6”的“行”，以及我描述的媒体查询。让我知道你是否需要特别了解某些事情。 – user1319182

这很好..至少显示你缩小的CSS，以便其他人可以参考他们需要放置在媒体查询CSS规则的元素选择器。 –

我的解决办法是使用media queries based on pixel density

这让写类似

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

116dpi的19" 屏幕，1920×1080分辨率的DPI。如果屏幕变得更大，比如23“，分辨率相同，像素密度变低，然后我们有116dpi以下的东西。

来源

2017-02-10 23:55:23 user1319182

尝试通过最小宽度设置媒体屏幕和限制。 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; 
     } 
    }

来源

2017-02-10 20:28:40

根据屏幕尺寸更改布局

回答

相关问题