根據屏幕尺寸更改佈局

我希望我的網站標題的內容佔用普通尺寸桌面/筆記本電腦屏幕寬度的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

根據屏幕尺寸更改佈局

回答

相關問題