根據瀏覽器的高度和寬度保持縱橫比和字體大小？

下面的代碼附加到window.onresize = resize;。在加載時讀取baseWidth和baseHeight作爲計算的基礎。 main變量是通過將其設置爲主html節點來定義的。字體在塊元素上設置，以使其中的所有基於em的元素以實物方式調整大小。當瀏覽器的寬度或高度改變時，重新計算比率。請參閱演示，瞭解我用JS實現的目標，但希望找到純粹的CSS解決方案：http://codepen.io/anon/pen/nLauF 根據瀏覽器的高度和寬度保持縱橫比和字體大小？

我一直在探索CSS3中的選項，例如calc。隨意也建議任何改善下面的JS也。

   function resize() { 
       var height = 0, 
        width = 0; 

       if(window.innerWidth <= window.innerHeight) { 
        size = window.innerWidth/baseWidth; 
        height = baseHeight * size; 
        width = window.innerWidth; 

       } else { 
        size = window.innerHeight/baseHeight; 
        height = window.innerHeight; 
        width = baseWidth * size; 
       } 

       if(baseWidth * size > window.innerWidth) { 
        size = window.innerWidth/baseWidth; 
        height = baseHeight * size; 
        width = window.innerWidth; 
       } 

       main.style.height = height + "px"; 
       main.style.width = width + "px"; 
       main.style.fontSize = size * 16 + "px"; 
      }

謝謝！

來源

2014-09-10 ClearBucket

可能重複的[高度等於動態寬度（CSS流體佈局）]（HTTP ：//stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout） – GentlePurpleRain 2014-09-10 15:00:39

也是這個問題：http://stackoverflow.com/questions/1495407/css -a-way-to-maintain-aspect-ratio-when-resizing-a-div/23673392 and this one：http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-填充屏幕寬度和高度在css – 2014-09-10 15:31:49

@ web-tiki這是最接近的，如果不是現貨：http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of- div-but-fill-screen-width-and-height-in-css謝謝！ – ClearBucket 2014-09-10 18:55:42

我寫了這個代碼，包括字體大小的計算與vmin units：

DEMO

CSS：

main { 
    width: 80vmin; 
    height: 60vmin; 
    background-color: #000; 
    position: absolute; 
    top:0; bottom:0; 
    left:0; right:0; 
    margin:auto; 
} 
h1 { 
    color: #fff; 
    font-size: 30px; /* general fallback */ 
    font-size: 5vm; /* IE9 fallback */ 
    font-size: 5vmin; 
}

對於瀏覽器的支持，可以檢查canIuse

的

來源

2014-09-11 08:40:00

這是更接近。 'font-size'調整大小隻適用於寬度而不適用於高度。有一個知道這個的錯誤。高度或寬度必須是其中一個或另一個的100％，以較小者爲準。原因是因爲它會允許它在身體標籤中使用或嵌套爲小孩。 vw在高度上的錯誤：https：//code.google.com/p/chromium/issues/detail？id = 124331 說是固定的，但仍然在Chrome以及其他瀏覽器中被破壞：http://css-tricks.com/viewport-sized-typography/ – ClearBucket 2014-09-11 14:25:34

@ClearBucket只記得'vmin'單位，它可以也適用於字體大小，檢查了這一點：http://jsfiddle.net/webtiki/890e1194/ – 2014-09-11 14:29:53

這是非常好的。謝謝您的幫助。 – ClearBucket 2014-09-15 15:59:01

我改編了一段CSS，我寫了一個不同的項目來解決你的問題：JSFiddle DEMO 我通過使用.75乘數實現了4-3的縱橫比（即main的寬度爲50％，height應該是75％，所以填充頂部是37.5％）。你可以看到這些如何調整來鎖定你的比例。

.main { 
    width: 50% !important; 
    height: 0; 
    display: block; 
    overflow: hidden; 
    line-height: 0; 
    position: relative; 
    padding: 37.5% 0 0 0; 
    background-color: #000; 
    margin: 0 auto; 
} 
.main-inner { 
    position: absolute; 
    display: block; 
    margin: auto; 
    top: 10px; 
    left: 10px; 
    bottom: 10px; 
    right: 10px; 
} 
.main-inner-relative { 
    position: relative; 
    padding: 10px; 
} 
p { 
    color: white; 
    padding: 0; 
    margin: 0; 
}

這將要求您修改HTML像這樣：

<div class="main"> 
    <div class="main-inner"> 
     <div class="main-inner-relative"> 
      <p>hello</p> 
     </div> 
    </div> 
</div>

reference 1 - 此引用是我用來保持鎖定長寬比響應

reference 2

圖像原始解決方案

來源

2014-09-10 18:08:56 JRulle

你的身高不適合。這有一個小提琴就是答案：http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css謝謝你你的答案！ @ web-tiki找到了我尋找的東西。 – ClearBucket 2014-09-10 18:58:04

根據瀏覽器的高度和寬度保持縱橫比和字體大小？

回答

相關問題