2017-02-18 46 views
0

我有一個筆記本電腦和顯示器使用1920×1080分辨率,但他們有不同的屏幕尺寸。 (筆記本電腦:13英寸,電腦顯示器:19英寸)如何使用Bootstrap在Web中自動擴展元素?

我在筆記本電腦屏幕上工作,我在'Value X'px fixed(示例值...)中定義了元素'高度'。然後當我將我的互聯網瀏覽器(Chrome,IE等)移動到PC屏幕時,它向我展示了大量的空白空間,如下所示。

enter image description here

我怎樣才能解決這個問題?

有人建議我使用媒體查詢...可以嗎?

+3

具有使用谷歌還沒有任何人建議? –

+1

嘗試使用媒體查詢並使用google也 –

+1

如果您可以顯示一些可能有幫助的相關代碼。沒有看到代碼,它看起來像bootstrap已經在它的媒體查詢中做了一些事情來調整你的身高。 – JakeParis

回答

3

我已經在下面做了一個例子。保持百分比的寬度和高度,可以在您打開的任何設備上自動調整。

*{box-sizing:border-box} 
 
body,html{ width:100%; height:100%} 
 
.bluebg{ width:100%; height:100%; background:blue; padding:20px;} 
 
.yellowbg{ width:100%; height:100%; background:yellow; }
<div class="bluebg"> 
 
    <div class="yellowbg"> 
 
    &nbsp; 
 
    </div> 
 
</div>

+1

爲了讓您的生活更輕鬆,如果您使用'vh'(視口高度)和'vw'(視口寬度)單位而不是百分比,則不必費心製作body和html 100%。 – JakeParis

+1

這也是一個很好的解決方案:) –