viewport-units | 易学教程

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? 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> <script language="javascript" type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement,

How to write css fallbacks for vh vw

阅读更多关于 How to write css fallbacks for vh vw

问题 Can anyone explain how fallbacks work in CSS? I am trying to set it up for vh and vw and clearly I am not getting it... Here is my attempted solution, which does not work. The height property is taken every time. CSS: -webkit-height: 5.2vh; -moz-height: 5.2vh; -ms-height: 5.2vh; -o-height: 5.2vh; height: 41px; /* The Fallback */ 回答1: Your Code (and why it doesn't work) Looking at your original code, I have a couple of comments: -webkit-height: 5.2vh; -moz-height: 5.2vh; -ms-height: 5.2vh; -o

“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? It’s a bug, registered as Bug 94158 - calc isn't working with viewport units . It's an old bug and has long been fixed, but if you're still supporting older versions of chrome, and specifically encountering this bug in an older version of

How to fix vh(viewport unit) css in mobile Safari?

阅读更多关于 How to fix vh(viewport unit) css in mobile Safari?

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine) html: <div id="facebox" style="top: 0px; left: 0px; display: block;"> <div class="popup"> <div class="body"> <div class="content_light"> <div class="Lcontent_left"></div> <div class="Lcontent_right"> <div class="Lright_content"></div> </div> </div> </div> </div> </div> This is my

How to implement max-font-size?

阅读更多关于 How to implement max-font-size?

I want to specify my font size using vw , as in font-size: 3vw; However, I also want to limit the font size to say 36px. How can I achieve the equivalent of max-font-size , which does not exist--is the only option to use media queries? font-size: 3vw; means that the font size will be 3% of the viewport width. So when the viewport width is 1200px - the font size will be 3% * 1200px = 36px. So a max-font-size of 36px can be easily implemented using a single media query to override the default 3vw font-size value. Codepen demo (Resize Browser) div { font-size: 3vw; } @media screen and (min-width:

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

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. 回答1: 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

How to fix vh(viewport unit) css in mobile Safari?

阅读更多关于 How to fix vh(viewport unit) css in mobile Safari?

问题 I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine) html: <div id="facebox" style="top: 0px; left: 0px; display: block;"> <div class="popup"> <div class="body"> <div class="content_light"> <div class="Lcontent_left"></div> <div

CSS Calc Viewport Units Workaround?

阅读更多关于 CSS Calc Viewport Units Workaround?

From what I've seen in other answers , CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement: height: calc(100vh - 75vw) Is there some workaround way I can achieve this using purely CSS even though the viewport units can't be used in the calc() statement? Or just CSS and HTML? I know I can do it dynamically using javascript, but I'd prefer CSS. Danield Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units. FIDDLE (In IE10+) Solution (for other browsers): box-sizing 1) Start of

How to implement max-font-size?

阅读更多关于 How to implement max-font-size?

问题 I want to specify my font size using vw , as in font-size: 3vw; However, I also want to limit the font size to say 36px. How can I achieve the equivalent of max-font-size , which does not exist--is the only option to use media queries? 回答1: font-size: 3vw; means that the font size will be 3% of the viewport width. So when the viewport width is 1200px - the font size will be 3% * 1200px = 36px. So a max-font-size of 36px can be easily implemented using a single media query to override the