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

How to Convert Sass Function to Less?

阅读更多关于 How to Convert Sass Function to Less?

问题 Does anyone know how to recreate the below Sass function in Less? I want to be able to easily convert units within any CSS property (e.g.: font-size, margin, padding, etc). Sass: @function get-vw($target) { $vw-context: (1440 * 0.01) * 1px; @return ($target / $vw-context) * 1vw; } CSS: selector { font-size: get-vw(20px)vw; } The Sass is from here: http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/ 回答1: Updated Answer: As seven-phases-max has mentioned in

“vw” CSS units in calc in Chrome not working

阅读更多关于 “vw” CSS units in calc in Chrome not working

问题 The new vw (and vh , vmin and vmax ) CSS units are quite useful, as is calc . Both work fine in Chrome (the latter prefixed as -webkit-calc ), but for some reason I've found that calc property values including the v* units, such as width: -webkit-calc(95vw - 25em) yield an invalid property value. Is this just not implemented yet, or the spec, or a bug? 回答1: It’s a bug, registered as Bug 94158 - calc isn't working with viewport units . 回答2: It's an old bug and has long been fixed, but if you

CSS3 100vh not constant in mobile browser

阅读更多关于 CSS3 100vh not constant in mobile browser

问题 I have a very odd issue... in every browser and mobile version I encountered this behavior: all the browsers have a top menu when you load the page (showing the address bar for example) which slide up when you start scrolling the page. 100vh sometimes is calculated only on the visible part of a viewport, so when the browser bar slide up 100vh increases (in terms of pixels) all layout re-paint and re-adjust since the dimensions have changed a bad jumpy effect for user experience How can avoid

Add/subtract fixed value to elements left property set in vh with jQuery

阅读更多关于 Add/subtract fixed value to elements left property set in vh with jQuery

问题 I have the following code: HTML: <div id="my-div"></div> CSS: #my-div{ display: none; position: absolute; left: 150vh; bottom: -150px; } jQuery: $.fn.vhLeft = function(property,unit){ var wpx = this.css(property).replace(/[^0-9]+/g,""); var temp = $('<div />').css({ left:'1'+unit, position: 'absolute' }); $('body').append(temp); var oneEm = temp.css(property).replace(/[^0-9]+/g,""); temp.remove(); var value = wpx/oneEm; return (Math.round(value*100))+unit; }; // You could now get your value

why font-sizing vw not working in safari?

阅读更多关于 why font-sizing vw not working in safari?

问题 I'm using vw as the unit for my font size, so that it will look nicely when resize the browser. However, when I browse it at Safari, the content run, anyone know how to solve it? thanks CSS .flatNav { background-image: url(../img/navBar.png); background-repeat: repeat-x; width: 90%; margin-right: auto; margin-left: auto; font-size: 0.8vw; height: 48px; position: relative; top: 28px; background-position: center; } .flatNav ul { list-style-type: none; height: 48px; width: 75%; margin-right: 1

Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions

阅读更多关于 Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions

问题 Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions? - OR is it just too good to be true? I often want to have a 'modal' type cover div, or a full-screen image for simple one button UI screens. The more I use flex-box, the less I can count on some of my old techniques. The hack I normally reach for when it comes to 100% height, is to: html, body { height: 100%; } HTML and body don't have an explicit height... and can't really know what height they

Convert relative/viewport size to fixed size on page load using JavaScript/JQuery

阅读更多关于 Convert relative/viewport size to fixed size on page load using JavaScript/JQuery

问题 hope you are having a nice day. I am currently developing a website, in which pretty much all of my measurements (font size, padding, margin, width, height, etc) are made with the viewport units vw and vh. I use these units because they are the best to make the page look like what I want on different screen resolutions, unlike pixel sizes. What I was wondering if it's possible, is to after the page loads, get the non-relative value of all those measurements (for example, if I say 1vw, and my

Detect viewport units (with modernizr or normal js) and serve appropriate stylesheet

阅读更多关于 Detect viewport units (with modernizr or normal js) and serve appropriate stylesheet

I actually have an issue im trying to solve since 3 weeks. Im trying to test support for vw units and serve a seperate stylesheet when the browser doesnt support the unit I read the modernizr tutorials and am familiar with modernizr css detects but testing for vh units (viewport relative units) is something I didnt find on the net. So basically: Scenario 1: Browser supports vw unit then serve stylesheet A. Scenario 2: Browser doesnt support it then serve stylesheet B. I did find out that there is a non-core detect called Modernizr.cssvwunit but I honestly have no idea where to start or how to

Scaling div width depending on height

阅读更多关于 Scaling div width depending on height

I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed. I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 ( resize browser height ) <body> <div></div> </body> html, body { height: 100%; width: 100%; margin: 0; } div { height: 100%; width: 130vh; margin: 0 auto; background: #f0f; } However, I worry about fallback for IE8 and Safari, as it this unit is not supported there. Are there any other CSS only methods of achieving this effect? I have a solution that works also with IE8 (using