viewport-units | 易学教程

Are Flexbox and vh height units not compatible in IE11?

阅读更多关于 Are Flexbox and vh height units not compatible in IE11?

I'm trying to use a flexbox-based layout to get a sticky footer for my page. This works well in Chrome and Firefox, but in IE11 the footer sits just after my main content. In other words, the main content isn't stretched to fill all of the available space. body { border: red 1px solid; min-height: 100vh; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } header, footer { background: #dd55dd; } main { background: #87ccfc; -ms-flex: 1 0 auto; -webkit-flex: 1 0 auto; flex: 1 0 auto; } <body> <header

Viewport-unit font-size and zooming bug: which browsers are affected?

阅读更多关于 Viewport-unit font-size and zooming bug: which browsers are affected?

问题 It seems that desktop IE10 doesn't correctly scale text that has its font size set in viewport units, when the zoom level is not set to 100%. I'm trying to find out which IE versions (and possibly other browsers) are affected by this. Please try this example in your browser and report your findings: <!DOCTYPE HTML> <HTML> <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> <META NAME="viewport" CONTENT="width=device-width, initial-scale=1.0"> <STYLE TYPE="text/css"

Safari: VH units applied to parent element doesn't allow 100% height in child?

阅读更多关于 Safari: VH units applied to parent element doesn't allow 100% height in child?

I have a very simple situation, where I want to set a container element to 80vh and then have the inner div to be 100% of that height. On Chrome this will render correctly, however on Safari, the inner element doesn't have 100% of the 80vh height. .container { background-color: red; width: 100%; height: 80vh; } .inner { height: 100%; background-color: blue; } Here is a fiddle showing this issue: http://jsfiddle.net/neilff/24hZQ/ On Chrome the element is blue, in Safari it is red. Is there a work around for this issue without applying 80vh to the height of the .inner div? This is a known bug

Safari: VH units applied to parent element doesn't allow 100% height in child?

阅读更多关于 Safari: VH units applied to parent element doesn't allow 100% height in child?

问题 I have a very simple situation, where I want to set a container element to 80vh and then have the inner div to be 100% of that height. On Chrome this will render correctly, however on Safari, the inner element doesn't have 100% of the 80vh height. .container { background-color: red; width: 100%; height: 80vh; } .inner { height: 100%; background-color: blue; } Here is a fiddle showing this issue: http://jsfiddle.net/neilff/24hZQ/ On Chrome the element is blue, in Safari it is red. Is there a

Viewport units, keeping aspect ratio?

阅读更多关于 Viewport units, keeping aspect ratio?

问题 So I've just discovered viewport units, and I really want to use them. First challenge: My element has a "base size" of 760x670 pixels. I want to use viewport units to scale it up so that either the height is 100vh , or the width is 100vw , whichever is smaller. Unfortnately, although I can use 100vmin to get the smaller of the two, I can only apply it to the width or the height, not both. Currently I'm using: #root { width: 760px; height: 670px; width: 100vw; height: calc(670vw/760); } This

Safari CSS rule vh-units?

阅读更多关于 Safari CSS rule vh-units?

问题 Does anybody know if there is a fix for Safari vh rule? #what{ min-height:70vh; } All working ok, in all browsers, but only in Safari it is not recognized? Is there a fix for safari, that we can use VH rule in css? 回答1: Instead of Vw/Vh, use rem with this JavaScript. The "run code snippet" might create confusion, cause its window "resizes" by zooming. To test this, just copy this code into some html file and run it in Safari and other browsers (or see "Full Page"). <!DOCTYPE html> <head>

Viewport units, keeping aspect ratio?

阅读更多关于 Viewport units, keeping aspect ratio?

So I've just discovered viewport units, and I really want to use them. First challenge: My element has a "base size" of 760x670 pixels. I want to use viewport units to scale it up so that either the height is 100vh , or the width is 100vw , whichever is smaller. Unfortnately, although I can use 100vmin to get the smaller of the two, I can only apply it to the width or the height, not both. Currently I'm using: #root { width: 760px; height: 670px; width: 100vw; height: calc(670vw/760); } This scales the width to fit the screen, resulting in vertical scrolling. This isn't too bad, but I'd prefer

Is it possible to calculate the Viewport Width (vw) without scrollbar?

阅读更多关于 Is it possible to calculate the Viewport Width (vw) without scrollbar?

As mentioned in the title, is it possible to calculate the vw without the scrollbars in css only? For example, my screen has a width of 1920px . vw returns 1920px , great. But my actual body width is only something like 1903px . Is there a way for me to retrieve the 1903px value with css only (not only for direct children of the body ), or do I absolutely need JavaScript for this? One way to do this is with calc. As far as i know, 100% is the width including scrollbars. So if you do: body { width: calc(100vw - (100vw - 100%)); } You get the 100vw minus the width of the scrollbar. You can do

Layout using vh does not scale with zoom

阅读更多关于 Layout using vh does not scale with zoom

I've tried to create a login form using ONLY vh sizes. Doing this, in the hopes that the form, in all, would scale accordingly to the viewport. It doesn't! For some reason zooming in, creates a blank space that keeps getting bigger the more you zoom, between the input fields and the text below. http://jsfiddle.net/TnY3L/ The fiddle isn't very well made, just copied it from my project. But you can see what's wrong - and that's what counts. Anyone have any idea as to how I were to go about fixing this? <span id="loginform"> <input type="text" name="login" class="LFORM" placeholder="USERNAME" />

How do vw and vh units work?

阅读更多关于 How do vw and vh units work?

I want to know how to calculate the value for vh and vw . I am designing a website that uses 2vw and its working perfectly for my text. However, I just guessed. Please tell me how these units work so I can use them in the future. I'd also like to know if they have cross browser support. vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc. To calculate the value in pixels, you would just do something like vwToPx = function(vwValue) { return $(window).outerWidth()/100*vwValue; } One thing you should be aware of is that mobile