2013-10-23 175 views
1

單獨使用CSS的父元素寬度大於視口時,是否可以使子元素的寬度適合視口?CSS:當父寬度更寬時,讓子寬度適合視口?

我正在設計一個用戶界面,以適應現有的,無響應的,固定寬度的網站佈局,我沒有(但)有任何直接的控制權,而且我希望至少我的界面能夠響應適合手機屏幕,即使整體網站佈局沒有。包含我的界面的頁面將至少能夠爲界面的樣式加載額外的CSS文件,但利用它來改變使用我的界面的頁面上的整體網站佈局是一個冒險的主張。

如果可以讓CSS動態縮放我的界面DIV寬度以適應任何視口大小,我寧願不必使用@media查詢設置一系列固定寬度斷點。爲了說明,請參閱本樣機:

Layout Mockup

...其中I控制內容DIV並希望其寬度,以適應任何視口如圖所示,但是我有在固定寬度的容器,頁眉和沒有控制頁腳DIVs

回答

1

是的!

使用vw和vh單位。 100vw等於視口寬度,而100vh是視口高度。

http://css-tricks.com/viewport-sized-typography/

還要確保,隨着移動處理包括

<meta name="viewport" content="initial-scale=1" />

所以不會放大或縮小一路時,默認情況。

+0

非常好!這正是我需要的,很多thx。顯然vw/vh單位根本不支持默認的Android瀏覽器(所有的東西!),所以我仍然必須在vw寬度之前聲明一個固定寬度的回退,但我會接受它。 – SubGothius