viewport-units

问题 How to solve the incompatible units problem? @mixin square-size($size, $min: $size, $max: $size) { $clamp-size: min(max($size, $min), $max); width: $clamp-size; height: $clamp-size; } The input is: @include square-size(10vw, 40px, 70px); Problem: Incompatible units: 'vw' and 'px'. node_modules\@ionic\app-scripts\dist\util\helpers.js:253.replace(/&/g, '&') But if I use calc(1vw - 1px) it works. (no unit problem). e.g. max(calc(1vw - 1px)) does not work. Because no number for max . In my case I

问题 I tried to use VW and calc together and works but calculated only once: loading time: http://codepen.io/anon/pen/mJOGbr html{ font-size: calc( 16px + 2vw ); } How can I force to evaluate that calc any time the browser window is resized? It is evaluated once, but never again. Without calc, the VM works fine... Thanks in advance! 回答1: Note that if you are using an older webkit browser, this problem of not-resizing may occur indeed. See this post. (Scroll to "Bugs!") The support is there in

问题 I tried to use VW and calc together and works but calculated only once: loading time: http://codepen.io/anon/pen/mJOGbr html{ font-size: calc( 16px + 2vw ); } How can I force to evaluate that calc any time the browser window is resized? It is evaluated once, but never again. Without calc, the VM works fine... Thanks in advance! 回答1: Note that if you are using an older webkit browser, this problem of not-resizing may occur indeed. See this post. (Scroll to "Bugs!") The support is there in

问题 in what has to be a widely used case, using vh for height of a div , and using vm for font size. css3 div.outer { height: 20vh; } div.inner { font-size: 3vw; height: auto; } div.inner2 { font-size: 2vw; } html - case 1 <div.outer> <div.inner>center me!</div> </div> html - case 2 <div.outer> <div.inner>center me top!</div> <div.inner2>center me bottom!</div> </div> is there any way to use calc() and other css3 properties to vertically center the div.inner within the div.outer ? 回答1: If you

问题 I have a pseudo element that appears on hover with: height: 0.4vh; The height doesn't change, only the width does. For some reason, however, under certain conditions the heights of different pseudo elements differ (both of the darker lines here have height: 0.4vh ): I put up this fiddle to demonstrate, but realise that it depends on the viewport height whether this weirdness happens: https://jsfiddle.net/vuw693La/ I am having this issue on Chromium and Firefox. Am I doing something wrong or

问题 Trying to make full screen frames using 100 vw and 100vh on divs. I have 2 in this JSfiddle and as you can see there's extra space both on the bottom and on the right of each frame. Is there a way of using vw and vh and having it fit perfectly without the extra space? The css looks like this: .f1 { width: 100vw; height: 100vh; background-color: blue; } .f2 { width: 100vw; height: 100vh; background-color: grey; } *Edit: It seems that making the width 100% solves this, but is this solution

问题 As per How to properly use css-values viewport-relative-lengths?, I've tried using viewport units in the following way, to automatically magnify a tiny page on a big monitor: /* automatically magnify business-card-style page in large viewports */ @media (min-width: 50em) and (min-height: 64em) { /* start with 100% at 50em, we'll have 150% magnification at 75em */ html {font-size: 2vmin;} } However, when tested in Google Chrome, it made the zoom feature to mostly stop working. Is it a bug

问题 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

问题 So I have text that I want to automatically resize based on the size of its container. However if I use something like font-size: 5vw; it looks good, but when I shrink the page the height starts getting way too small Is there anyway that I can resize the text based on both vh and vw so, for example, if I just decrease the width of the page the height doesn't decrease too? like if I only decrease the width of the page, I want the height of the text to stay the same and vice versa. Basically I

问题 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