響應方形大屏幕

Question

我正在使用bootstrap爲我的網站。除非我在方形大屏幕上看到，否則根據不同屏幕的響應很好。內容在正常屏幕上使用填充頂部居中，我希望它在底部顯示在方形屏幕上，因爲它看起來有點奇怪，下面留下了空白。我如何使它響應方形屏幕或說大屏幕？我試圖讓位置相對於底部，它不工作！

Answer 1

您可以使用媒體查詢就能根據自己的像素寬高比這樣的畫面：

@media screen and (max-aspect-ratio:1/1) { 
    /* square styles here */ 
} 

下面是行動的它Fiddle。

此特定查詢僅針對與寬度爲或高度爲的高度相同的屏幕。如果寬高比高於1：1，則表示屏幕比寬高。

如果你想針對廣場正是，你可以使用：

@media screen and (min-aspect-ratio:1/1) and (max-aspect-ratio:1/1) { 
    /* square styles here */ 
} 

我不會推薦這雖然，因爲它會only fire at that exact pixel ratio，爲您提供不同的顯示尺寸無法容忍，因爲你」我會在上面的Fiddle例子中看到這個。這可能會爲你自己做很多額外的工作。

方形屏幕是獨一無二的，因爲通常情況下，屏幕可以是縱向或橫向，但方形屏幕既不可以。它們也很少用作顯示器。你的目標是智能手錶嗎？